Repository navigation
Keep input focus on Enter when enterKeyHint is "next" - #530
Open
borisyankov wants to merge 1 commit into
Open
borisyankov wants to merge 1 commit into
borisyankov wants to merge 1 commit into
Conversation
React Native blurs a single-line TextInput on submit by default, which hides the keyboard before an onKeyDown handler can move focus to the next field. On web, Enter never blurs an input. Set submitBehavior to "submit" for html.input when enterKeyHint is "next" and an onKeyDown handler is provided.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On native, pressing the keyboard's Next key in an
html.inputblurs the input before theonKeyDownhandler runs. React Native's defaultsubmitBehaviorfor a single-lineTextInputisblurAndSubmit, and RSD mapsonSubmitEditingtoonKeyDown({ key: 'Enter' }).The usual pattern for moving between form fields is:
With the default behaviour the sequence is blur (keyboard starts hiding), then
onKeyDown, then focus on the next field (keyboard shows again). On Android this is a visible hide-and-reshow of the keyboard and the screen jumps. On web, Enter never blurs an input, so the same code moves focus cleanly.submitBehavioris not an allowed prop, so apps cannot work around this without patching RSD.Change
html.inputsetssubmitBehavior="submit"on the nativeTextInputwhen both hold:enterKeyHintis"next"onKeyDownhandler is providedonSubmitEditingstill fires, soonKeyDownreceives Enter as before; the input just keeps focus, and the handler can hand it to the next field with the keyboard staying up.The conditions are deliberately narrow:
enterKeyHintvalues are unchanged.done,go,searchand the rest still blur and dismiss the keyboard.submitis set, so without a handler Next would become a dead key.html.textareais unchanged.submiton a multiline input would stop Enter from inserting a newline.Behaviour change to note
An input with
enterKeyHint="next"whoseonKeyDowndoes not move focus to another text input (for example it opens a picker) no longer dismisses the keyboard on its own; the handler needs to callblur().Testing
npm run flow, eslint, prettier andnpm run jestpass (898 passed, 2 skipped).