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:
c0mrade
2026-03-27 13:40:13 +03:00
parent 5246ad2a09
commit 3b659b7450
3 changed files with 14 additions and 6 deletions

View File

@@ -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) => {

View File

@@ -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(() => {

View File

@@ -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}