Remove returnKeyType for numeric/phone pad keyboards on iOS#85444
Remove returnKeyType for numeric/phone pad keyboards on iOS#85444carlosmiceli merged 5 commits intomainfrom
Conversation
On iOS, phone/numeric pad keyboards don't have a built-in return key. When FormProvider set returnKeyType: 'go' on these inputs, React Native's native iOS code created a UIToolbar with a visible "Go" button above the keyboard, duplicating the form's existing submit button. This change detects numeric keyboard types (tel, numeric, decimal, phone-pad, number-pad, decimal-pad) and skips setting returnKeyType for them, removing the extra toolbar button while keeping onSubmitEditing for hardware keyboard submission. Co-authored-by: Linh Vo <linhvovan29546@users.noreply.github.com>
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
src/components/Form/FormProvider.tsx
Outdated
| // Numeric/phone pad keyboards on iOS don't have a built-in return key. Setting returnKeyType | ||
| // on these creates a visible toolbar button (e.g. "Go") that duplicates the form's submit button. | ||
| const inputPropsRecord = inputProps as Record<string, unknown>; | ||
| const isNumericKeyboard = |
There was a problem hiding this comment.
@MelvinBot Could you please create a helper function for this and write some unit tests as well?
There was a problem hiding this comment.
Done! Extracted the logic into a dedicated isNumericKeyboard helper function in src/components/Form/isNumericKeyboard.ts and added unit tests in tests/unit/isNumericKeyboardTest.ts covering all inputMode and keyboardType variants (including edge cases with mixed props and empty props).
Moved the numeric keyboard detection logic from FormProvider into a dedicated isNumericKeyboard helper and added comprehensive unit tests covering all inputMode and keyboardType variants. Co-authored-by: Linh Vo <linhvovan29546@users.noreply.github.com>
Co-authored-by: Linh Vo <linhvovan29546@users.noreply.github.com>
|
Fixed the failing Prettier check: sorted the import of |
|
I analyzed the failing checks on this PR. Here's the summary:
No additional code fixes are needed. The Prettier issue is already resolved, and the iOS build failure is a transient infrastructure problem. The latest CI run is currently in progress with all completed checks passing. |
|
The failing check is unrelated to this PR. Analysis: The This is a transient CI infrastructure issue — the S3 bucket used for build caching was temporarily unreachable. Evidence: The PR only modifies Re-running the failed check should resolve this. |
|
The failing checks are unrelated to this PR's changes. 1. 2. Evidence: This PR only modifies |
| * Numeric/phone pad keyboards on iOS don't have a built-in return key. Setting returnKeyType | ||
| * on these creates a visible toolbar button (e.g. "Go") that duplicates the form's submit button. | ||
| */ | ||
| function isNumericKeyboard(inputProps: Record<string, unknown>): boolean { |
There was a problem hiding this comment.
@MelvinBot Could you please use InputComponentBaseProps instead of Record<string, unknown>?
type NumericKeyboardProps = Pick<InputComponentBaseProps, 'inputMode' | 'keyboardType'>;
There was a problem hiding this comment.
Done! Added inputMode and keyboardType to InputComponentBaseProps in types.ts, created a NumericKeyboardProps type using Pick<InputComponentBaseProps, 'inputMode' | 'keyboardType'>, and removed the Record<string, unknown> cast from FormProvider.tsx. Updated the tests accordingly.
| inputProps.keyboardType === 'phone-pad' || | ||
| inputProps.keyboardType === 'number-pad' || | ||
| inputProps.keyboardType === 'decimal-pad' |
There was a problem hiding this comment.
Done! Replaced all string literals with CONST variables — added CONST.KEYBOARD_TYPE.PHONE_PAD (which was missing) and now using CONST.KEYBOARD_TYPE.PHONE_PAD, CONST.KEYBOARD_TYPE.NUMBER_PAD, and CONST.KEYBOARD_TYPE.DECIMAL_PAD in both the helper and unit tests.
|
The two failing checks are unrelated to this PR's changes: 1. 2. No fix needed from this PR. Re-running the checks should resolve both failures. |
Added inputMode and keyboardType to InputComponentBaseProps and created a NumericKeyboardProps type using Pick, replacing Record<string, unknown>. Co-authored-by: Linh Vo <linhvovan29546@users.noreply.github.com>
|
The previous failing checks are unrelated to this PR's changes:
Evidence: This PR only modifies A new CI run is already in progress — these flaky/infra failures should not recur. |
Added CONST.KEYBOARD_TYPE.PHONE_PAD and replaced all string literals
('phone-pad', 'number-pad', 'decimal-pad') with their CONST equivalents
in isNumericKeyboard and unit tests.
Co-authored-by: Linh Vo <linhvovan29546@users.noreply.github.com>
|
@MelvinBot Make PR is ready for review |
|
I was unable to mark the PR as ready for review due to a permission issue in my environment. You can mark it ready yourself by clicking the "Ready for review" button at the bottom of the PR, or by running: |
|
@MelvinBot Mark this ready for review |
|
@linhvovan29546 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
Done — this PR has been marked as Ready for review. ✅ |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-03-17.at.10.56.14.movAndroid: mWeb ChromeScreen.Recording.2026-03-17.at.10.54.39.moviOS: HybridAppScreen.Recording.2026-03-17.at.10.44.37.moviOS: mWeb SafariScreen.Recording.2026-03-17.at.10.49.09.movMacOS: Chrome / SafariScreen.Recording.2026-03-17.at.10.43.28.mov |
|
We did not find an internal engineer to review this PR, trying to assign a random engineer to #85005 as well as to this PR... Please reach out for help on Slack if no one gets assigned! |
JmillsExpensify
left a comment
There was a problem hiding this comment.
Fix LGTM. Product approved.
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 @carlosmiceli has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/carlosmiceli in version: 9.3.40-0 🚀
|
|
🚀 Deployed to staging by https://github.com/carlosmiceli in version: 9.3.40-0 🚀
|
|
🚀 Deployed to production by https://github.com/cristipaval in version: 9.3.41-4 🚀
|
Explanation of Change
On iOS, phone/numeric pad keyboards don't have a built-in return key. When
FormProviderunconditionally setreturnKeyType: 'go'on all single-line TextInputs, React Native's native iOS code (RCTTextInputComponentView.mm) created a UIToolbar input accessory view with a visible "Go" button above the keyboard. This duplicated the form's existing submit button (e.g. "Save").This PR detects numeric keyboard types (
tel,numeric,decimal,phone-pad,number-pad,decimal-pad) inFormProvider.registerInputand skips settingreturnKeyTypefor them. TheonSubmitEditinghandler is still set, so hardware keyboard form submission continues to work.Fixed Issues
$ #85005
PROPOSAL: #85005 (comment)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
N/A - This is an iOS-specific fix
Android: mWeb Chrome
N/A - This is an iOS-specific fix
iOS: Native
The "Go" toolbar button above the keyboard will no longer appear on phone number inputs.
iOS: mWeb Safari
N/A - mWeb Safari does not show the toolbar button
MacOS: Chrome / Safari
No visual change - Enter key still submits the form as before.