From de0a9d9efb149a2291b5f8a7833e81fb73bf6ec4 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Tue, 20 Jan 2026 17:32:36 +0300
Subject: [PATCH] Improve TopUpModal input focus behavior for mobile and
 desktop

- Enhanced auto-focus functionality to work on mobile devices, specifically in Telegram WebApp.
- Added a small delay to ensure the DOM is ready before focusing the input.
- Implemented scrolling into view for iOS Safari to trigger the keyboard when the input is focused.
---
 src/components/TopUpModal.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx
index 4bf5d16..8346a9b 100644
--- a/src/components/TopUpModal.tsx
+++ b/src/components/TopUpModal.tsx
@@ -247,13 +247,20 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
     : convertAmount(rub).toFixed(currencyDecimals)
   const isPending = topUpMutation.isPending || starsPaymentMutation.isPending
 
-  // Auto-focus input (only on desktop)
+  // Auto-focus input - works on mobile in Telegram WebApp
   useEffect(() => {
+    // Small delay to ensure DOM is ready
     const timer = setTimeout(() => {
-      if (!isMobileScreen) inputRef.current?.focus()
-    }, 150)
+      if (inputRef.current) {
+        inputRef.current.focus()
+        // For iOS Safari - scroll input into view to trigger keyboard
+        if (isMobileScreen) {
+          inputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }
+      }
+    }, 100)
     return () => clearTimeout(timer)
-  }, [isMobileScreen])
+  }, [])
 
   // Calculate display amount for preview
   const displayAmount = amount && parseFloat(amount) > 0 ? parseFloat(amount) : 0
@@ -330,6 +337,7 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
             className="w-full h-16 px-5 pr-16 text-2xl font-bold bg-transparent text-dark-100 placeholder:text-dark-600 focus:outline-none"
             style={{ fontSize: '24px' }}
             autoComplete="off"
+            autoFocus
           />
           <span className="absolute right-5 top-1/2 -translate-y-1/2 text-lg font-semibold text-dark-500">
             {currencySymbol}