Fix: Login Button Not Responsive After Manual Credential Entry

[najuna-brian]

Problem

The login button on the Settings screen appeared enabled (green) but didn't respond to taps when credentials were typed or pasted manually. This was caused by React state batching issues and improper handler attachment.
Fixes #229

Solution

• Memoized button disabled state using useMemo to ensure it stays in sync with field values during state updates
• Wrapped handleLogin in useCallback with proper dependencies to prevent stale closures
• Simplified onPress handler by removing conditional undefined assignment (the disabled prop already handles this)
• Added keyboardShouldPersistTaps="handled" to ScrollView to ensure buttons are tappable when keyboard is visible
• Added keyboardDismissMode="on-drag" for improved UX

Changes

• formulus/src/screens/SettingsScreen.tsx
  • Replaced inline IIFE button state calculation with useMemo
  • Wrapped handleLogin in useCallback with correct dependencies
  • Removed conditional onPress assignment
  • Added ScrollView keyboard handling props

Testing

• ✅ Button responds correctly when typing credentials
• ✅ Button responds correctly when pasting credentials (especially on emulators)
• ✅ Button responds correctly when modifying auto-filled credentials from scanner
• ✅ Button shows proper visual feedback when pressed
• ✅ QR scanner flow continues to work as before

Impact

Users can now reliably log in when entering credentials manually, eliminating the need for QR scanner workaround.

[r0ssing]

Looks great - thanks! I am wondering if the useMemo optimization is worth it, but if nothing else it made me look twice 👀 😄

[najuna-brian]

Good point! The useMemo isn’t for performance here, mainly to make the derived disabled state explicit and avoid recomputing it inline in JSX, especially given the original state sync issue. Happy to simplify it if you’d prefer it computed inline.

Thoughts?