Page MenuHomePhabricator

[Cashtab] Hide the mobile nav while the OS keyboard is open
ClosedPublic

Authored by bytesofman on Wed, Sep 2, 13:48.

Details

Reviewers
PiRK
Group Reviewers
Restricted Project
Commits
rABCf3ee54da60b0: [Cashtab] Hide the mobile nav while the OS keyboard is open
Summary

The system keyboard is pushing up the nav bar, which in some uses is covering the input field. Annoying.

Hide the nav bar when the system keyboard is up. We never want to see this above the keyboard while the user is inputting a number.

AI desc:

The bottom tab bar is position:fixed to the visual viewport, so the
system keyboard pushed it up over the focused field. Hide the footer (and drop
fixed CTAs to bottom: 0) when a system-keyboard input is focused on mobile, or
when the visual viewport shrinks by a keyboard-sized inset. Custom amount
keypad fields stay unchanged so the in-app keypad still docks above the nav.

Test Plan
  • cd cashtab && npm test -- --watchAll=false src/components/Common/__tests__/cashtabOsKeyboard.test.ts src/hooks/__tests__/useOsKeyboardChrome.test.ts src/components/Common/__tests__/cashtabAmountKeypadScroll.test.ts
  • On a phone, focus a recipient/address or other system-keyboard field: bottom nav hides; dismiss the keyboard and the nav returns
  • On Send, focus an amount field (custom keypad): keypad still docks above the nav
  • Desktop sidebar nav is unchanged

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

Build Bitcoin ABC Diffs / Diff Testing (ai-review) passed.
CodeRabbit Review

Diff : committed changes only
Compare : HEAD → master
Directory : work
────────────────────────────────────────

(\(\
(• .•) Tabs or spaces? Yes.

────────────────────────────────────────
Review complete
No findings ✔

10 files reviewed:

  • cashtab/src/components/Agora/DeepLinkBuy/styled.ts
  • cashtab/src/components/App/App.tsx
  • cashtab/src/components/App/styles.ts
  • cashtab/src/components/Common/__tests__/cashtabAmountKeypadScroll.test.ts
  • cashtab/src/components/Common/__tests__/cashtabOsKeyboard.test.ts
  • cashtab/src/components/Common/cashtabAmountKeypadScroll.ts
  • cashtab/src/components/Common/cashtabOsKeyboard.ts
  • cashtab/src/components/Send/styled.ts
  • cashtab/src/hooks/__tests__/useOsKeyboardChrome.test.ts
  • cashtab/src/hooks/useOsKeyboardChrome.ts

────────────────────────────────────────

bytesofman published this revision for review.Wed, Sep 2, 14:36
bytesofman edited the summary of this revision. (Show Details)
This revision is now accepted and ready to land.Thu, Sep 3, 13:13