fix(perps): prevent keyboard rendering off-viewport on TP/SL and order entry screens cp-7.80.0#30843
Conversation
showSoftInputOnFocus is Android-only so on iOS the native keyboard still appeared when TP/SL TextInputs were focused, stacking on top of the custom keypad and pushing content outside the viewport. Dismiss the native keyboard on iOS after focus and guard the onBlur handler so the programmatic dismiss does not hide the custom keypad. Also switch PerpsOrderView to a compact scroll-content style when the keypad is active, dropping the 120px bottom padding reserved for the Place Order button that is hidden in that state.
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
…rd dismiss The useEffect cleanup only cancelled requestAnimationFrame but never cleared the inner setTimeout, causing a race condition when switching inputs quickly on iOS. Additionally, specific blur handlers (e.g. handleTakeProfitPriceBlur) ran unconditionally before handleInputBlur, bypassing the isProgrammaticDismissRef guard and resetting focus state during programmatic keyboard dismissal.
Advance fake timers between focus and blur events so the isProgrammaticDismissRef resets to false before the blur fires, matching the real-world sequence where a genuine user blur arrives after the keyboard dismiss cycle completes.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit d0e1509. Configure here.
The keyboard dismiss logic lived in a useEffect keyed on focusedInput. When the same input was re-focused, React deduplicated the state update and the effect never re-fired, causing the native keyboard to reappear alongside the custom keypad. Moving the dismiss into the callback ensures it fires on every focus event. Also wraps the fake-timer test body in try/finally so jest.useRealTimers() always runs even if assertions throw.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #30843 +/- ##
==========================================
- Coverage 82.77% 82.66% -0.11%
==========================================
Files 5551 5551
Lines 142509 142784 +275
Branches 32882 32962 +80
==========================================
+ Hits 117958 118030 +72
- Misses 16699 16885 +186
- Partials 7852 7869 +17 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
These are UI/UX fixes for keyboard/keypad behavior in Perps order and TP/SL views. The changes are self-contained within the Perps component area. Tag selection:
No other tags are warranted as the changes don't touch navigation, accounts, networks, browser, snaps, or other wallet features. Performance Test Selection: |
Description
The keyboard renders off-page (outside the viewport) when a user interacts with input fields on certain Perps screens.
Root cause: The
PerpsTPSLView(Take Profit / Stop Loss screen) usesTextInputcomponents withshowSoftInputOnFocus={false}, but this prop is Android-only. On iOS, tapping theseTextInputfields still triggers the native keyboard, which stacks on top of the custom on-screen keypad and pushes content outside the viewport. The view has noKeyboardAvoidingViewto handle this double-keyboard scenario.Fix:
Keyboard.dismiss()inside auseEffectthat fires when aTextInputreceives focus. AisProgrammaticDismissRefguard prevents the resultingonBlurfrom hiding the custom keypad.PerpsOrderView'sScrollViewto a compact content style (flexGrow: 0,paddingBottom: 0) when the custom keypad is active. The original style reserves 120px bottom padding for the absolutely-positioned "Place Order" button, which is hidden while the keypad is shown — this wasted vertical space could push the keypad off-viewport on smaller devices.Changelog
CHANGELOG entry: Fixed keyboard rendering outside the viewport on Perps TP/SL and order entry screens on iOS
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/TAT-3279
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Performance checks (if applicable)
trace()for usage andaddTokenfor an exampleFor performance guidelines and tooling, see the Performance Guide.
Pre-merge reviewer checklist
Note
Low Risk
UI-only layout and keyboard handling on Perps order/TP-SL screens with no auth, payment, or trading logic changes.
Overview
Fixes iOS Perps screens where the native keyboard could stack on the custom keypad and push UI off-screen, because
showSoftInputOnFocus={false}does not apply on iOS.On
PerpsTPSLView, focusing TP/SLTextInputs now callsKeyboard.dismiss()(viarequestAnimationFrame) while a short-livedisProgrammaticDismissRefignores the resultingonBlurso the custom keypad stays open; per-field blur handlers skip hook blur during that window. Focus/blur tests advance fake timers to clear the guard.On
PerpsOrderView, when the amount keypad is active theScrollViewusesscrollViewContentKeypad(flexGrow: 0, no bottom padding) instead of the style that reserves space for the hidden Place Order bar.Reviewed by Cursor Bugbot for commit 1f9143e. Bugbot is set up for automated code reviews on this repo. Configure here.