[ionic migration] keyboard opens any time navigating to a new page that has a field and cursor jumps around weirdly

[sahilc0]

keyboard opens any time navigating to a new page that has a field and cursor jumps around weirdly

[arkanaai]

Codebase Context

This is rooted in how setFocus() is called during page transitions. Two components are the primary culprits:

src/components/Input.tsx (lines 41–46)

useEffect(() => {
  if (focus && firstRun.current) {
    firstRun.current = false
    input.current?.setFocus()
  }
})  // ← no dependency array — runs after every render

No dependency array means this fires on every render. The firstRun ref guards against repeat calls within a component's lifetime, but on a fresh navigation the component remounts and firstRun resets to true — so setFocus() fires immediately when the page renders, before the Ionic slide animation finishes. That's what opens the keyboard and causes the cursor to jump.

src/components/InputAmount.tsx (lines 58–60)

useEffect(() => {
  if (focus && input.current) input.current.setFocus()
}, [focus])

Cleaner pattern, but still triggers setFocus() as soon as the component mounts with focus=true, which again races the page-enter animation.

Affected screens (callers passing focus={true} unconditionally)

• src/components/NeedsPassword.tsx — <InputPassword focus … />
• src/screens/Wallet/Send/Form.tsx — focus state machine drives focus={'recipient' | 'amount'}
• src/screens/Wallet/Receive/QrCode.tsx — focus={!isMobileBrowser} (partially guarded)
• src/components/NewPassword.tsx — focus={'password' | 'confirm'} state

---

Acceptance Criteria

• Navigating to any page that contains an auto-focused input does not open the native keyboard until the page-enter transition is fully complete
• Cursor does not jump or flash during navigation
• Manually tapping an input field still opens the keyboard normally
• NeedsPassword, Send/Form, and NewPassword screens are smoke-tested on iOS and Android after the fix
• Desktop/browser behaviour is unchanged

---

Suggested Approach

Use Ionic's useIonViewDidEnter hook (fires after the enter animation completes) to gate the setFocus() call instead of useEffect:

// Option A — lift the gate into each page component
import { useIonViewDidEnter } from '@ionic/react'

useIonViewDidEnter(() => {
  if (focus) input.current?.setFocus()
})

Or, if we want to keep the fix inside the shared input components, add a small settled state that is only flipped inside useIonViewDidEnter and pass it down (or use a context). A simpler fallback is a short timeout (e.g. setTimeout(..., 300)) matching the default Ionic page-transition duration, but the lifecycle hook is cleaner.

Also fix Input.tsx to add a proper dependency array [focus] so it stops re-running on every render regardless.