mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
fix: bottom nav disappears after visiting payment page in Telegram
- Reset isKeyboardOpen on route change so bottom nav always restores - Disable autoFocus on payment input in Telegram Mini App - Skip auto-focus on Profile email inputs in Telegram
This commit is contained in:
@@ -221,6 +221,11 @@ export function AppShell({ children }: AppShellProps) {
|
|||||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
|
const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
|
||||||
|
|
||||||
|
// Reset keyboard state on route change — prevents bottom nav staying hidden after navigation
|
||||||
|
useEffect(() => {
|
||||||
|
setIsKeyboardOpen(false);
|
||||||
|
}, [location.pathname]);
|
||||||
|
|
||||||
// Keyboard detection for hiding bottom nav
|
// Keyboard detection for hiding bottom nav
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleFocusIn = (e: FocusEvent) => {
|
const handleFocusIn = (e: FocusEvent) => {
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { useState, useRef, useEffect } from 'react';
|
import { useState, useRef, useEffect } from 'react';
|
||||||
import { Link, useNavigate } from 'react-router';
|
import { Link, useNavigate } from 'react-router';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { usePlatform } from '@/platform';
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { motion, AnimatePresence } from 'framer-motion';
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
import { useAuthStore } from '../store/auth';
|
import { useAuthStore } from '../store/auth';
|
||||||
@@ -250,14 +251,16 @@ export default function Profile() {
|
|||||||
return () => clearInterval(timer);
|
return () => clearInterval(timer);
|
||||||
}, [verificationResendCooldown]);
|
}, [verificationResendCooldown]);
|
||||||
|
|
||||||
// Auto-focus inputs on step change
|
// Auto-focus inputs on step change (skip on Telegram — keyboard hides bottom nav)
|
||||||
|
const { platform: profilePlatform } = usePlatform();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (profilePlatform === 'telegram') return;
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
if (changeEmailStep === 'email') newEmailInputRef.current?.focus();
|
if (changeEmailStep === 'email') newEmailInputRef.current?.focus();
|
||||||
else if (changeEmailStep === 'code') codeInputRef.current?.focus();
|
else if (changeEmailStep === 'code') codeInputRef.current?.focus();
|
||||||
}, 100);
|
}, 100);
|
||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
}, [changeEmailStep]);
|
}, [changeEmailStep, profilePlatform]);
|
||||||
|
|
||||||
// Auto-close success after 3s
|
// Auto-close success after 3s
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ export default function TopUpAmount() {
|
|||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const { formatAmount, currencySymbol, convertAmount, convertToRub, targetCurrency } =
|
const { formatAmount, currencySymbol, convertAmount, convertToRub, targetCurrency } =
|
||||||
useCurrency();
|
useCurrency();
|
||||||
const { openInvoice, openTelegramLink, openLink } = usePlatform();
|
const { openInvoice, openTelegramLink, openLink, platform } = usePlatform();
|
||||||
const haptic = useHaptic();
|
const haptic = useHaptic();
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
@@ -228,15 +228,16 @@ export default function TopUpAmount() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Auto-focus input
|
// Auto-focus input (only on desktop — mobile keyboard hides bottom nav)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (platform === 'telegram') return;
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
if (inputRef.current) {
|
if (inputRef.current) {
|
||||||
inputRef.current.focus();
|
inputRef.current.focus();
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
}, []);
|
}, [platform]);
|
||||||
|
|
||||||
if (!method) {
|
if (!method) {
|
||||||
return (
|
return (
|
||||||
@@ -399,7 +400,6 @@ export default function TopUpAmount() {
|
|||||||
placeholder="0"
|
placeholder="0"
|
||||||
className="h-14 w-full bg-transparent px-4 pr-12 text-xl font-bold text-dark-100 placeholder:text-dark-600 focus:outline-none"
|
className="h-14 w-full bg-transparent px-4 pr-12 text-xl font-bold text-dark-100 placeholder:text-dark-600 focus:outline-none"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
autoFocus
|
|
||||||
/>
|
/>
|
||||||
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-base font-semibold text-dark-500">
|
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-base font-semibold text-dark-500">
|
||||||
{currencySymbol}
|
{currencySymbol}
|
||||||
|
|||||||
Reference in New Issue
Block a user