Skip to content

Keep input focus on Enter when enterKeyHint is "next" - #530

Open
borisyankov wants to merge 1 commit into
react:mainfrom
borisyankov:input-next-keep-focus
Open

borisyankov wants to merge 1 commit into
react:mainfrom
borisyankov:input-next-keep-focus

Conversation

@borisyankov

Copy link
Copy Markdown

Problem

On native, pressing the keyboard's Next key in an html.input blurs the input before the onKeyDown handler runs. React Native's default submitBehavior for a single-line TextInput is blurAndSubmit, and RSD maps onSubmitEditing to onKeyDown({ key: 'Enter' }).

The usual pattern for moving between form fields is:

<html.input
  enterKeyHint="next"
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      nextRef.current?.focus();
    }
  }}
/>

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.

submitBehavior is not an allowed prop, so apps cannot work around this without patching RSD.

Change

html.input sets submitBehavior="submit" on the native TextInput when both hold:

  • enterKeyHint is "next"
  • an onKeyDown handler is provided

onSubmitEditing still fires, so onKeyDown receives 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:

  • Other enterKeyHint values are unchanged. done, go, search and the rest still blur and dismiss the keyboard.
  • No handler, no change. React Native consumes the key once submit is set, so without a handler Next would become a dead key.
  • html.textarea is unchanged. submit on a multiline input would stop Enter from inserting a newline.

Behaviour change to note

An input with enterKeyHint="next" whose onKeyDown does 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 call blur().

Testing

  • Added a native test covering the four cases above.
  • npm run flow, eslint, prettier and npm run jest pass (898 passed, 2 skipped).
  • Not verified on a device or simulator in this PR, on either Android or iOS.

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.
@meta-cla meta-cla Bot added the cla signed label Nov 13, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant