Allow multiline TextInputs be submittable without blurring #33653

tonyd33 · 2022-04-15T16:57:45Z

Summary

For multiline TextInputs, it's possible to send the submit event when pressing the return key only with blurOnSubmit. However, there's currently no way to do so without blurring the input and dismissing the keyboard. This problem is apparent when we want to use a TextInput to span multiple lines but still have it be submittable (but not blurrable), like one might want for a TODO list.

Changelog

[General] [Added] - Add returnKeyAction prop to TextInput component
[General] [Deprecated] - Remove usages of blurOnSubmit in native code and convert blurOnSubmit to returnKeyAction in the JavaScript conversion layer

Test Plan

Verified old usages of combinations of blurOnSubmit and multiline matched previous behavior and that the new returnKeyAction prop behaves as expected.

Android	iOS

With the changes, the TODO list example from before now looks like this:

facebook-github-bot · 2022-04-15T16:57:48Z

Hi @tonyd33!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

analysis-bot · 2022-04-15T17:14:29Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: fbe72cf
Branch: main

facebook-github-bot · 2022-04-18T23:20:27Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

analysis-bot · 2022-04-18T23:47:22Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,774,886	-1,159
android	hermes	armeabi-v7a	7,180,265	-771
android	hermes	x86	8,083,298	-1,752
android	hermes	x86_64	8,063,603	-1,617
android	jsc	arm64-v8a	9,647,460	-2,617
android	jsc	armeabi-v7a	8,421,895	-2,274
android	jsc	x86	9,596,294	-3,262
android	jsc	x86_64	10,194,152	-2,986

Base commit: fbe72cf
Branch: main

facebook-github-bot · 2022-04-19T00:09:25Z

@makovkastar has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot · 2022-04-19T00:28:39Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

lunaleaps · 2022-04-20T17:21:48Z

...tinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputProps.cpp

+      returnKeyAction(convertRawProp(context, rawProps,
+           "returnKeyAction",
+          sourceProps.returnKeyAction,
+          {})),


Why do we not pass "blurOnSubmit" here?

We're no longer using "blurOnSubmit" in native code as it's being replaced by "returnKeyAction". This conversion is done in TextInput.js

lunaleaps · 2022-04-20T17:22:12Z

ReactCommon/react/renderer/components/textinput/iostextinput/conversions.h

+    const RawValue &value,
+    ReturnKeyAction &result) {
+  auto string = (std::string)value;
+  if (string == "default") {


Where do we set "default"? Is this set somewhere when the component doesn't pass the prop?

No, it should always be set to one of "blur", "blurAndSubmit" or "newline". This is removed now

facebook-github-bot · 2022-04-20T20:39:43Z

@makovkastar has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

makovkastar · 2022-04-25T17:40:58Z

Posting some of @yungsters's feedback on this PR:

After thinking about this more, I don't think "return key" is the right name for this prop.

The button on mobile keyboards is not necessarily a "return key" like it is on web and desktop platforms. Neither "return key" nor "submit key" are great because both imply one of the behaviors:

"return key" implies a default behavior of inserting a new line.
"submit key" implies a default behavior of invoking onSubmitEditing.

That said, I think it would still be better to use terminology that already exists in the interface. So… maybe submitBehavior or submitAction instead of returnKeyAction?

tonyd33 · 2022-04-27T18:40:20Z

Posting some of @yungsters's feedback on this PR:

After thinking about this more, I don't think "return key" is the right name for this prop.

The button on mobile keyboards is not necessarily a "return key" like it is on web and desktop platforms. Neither "return key" nor "submit key" are great because both imply one of the behaviors:

"return key" implies a default behavior of inserting a new line.

"submit key" implies a default behavior of invoking onSubmitEditing.

That said, I think it would still be better to use terminology that already exists in the interface. So… maybe submitBehavior or submitAction instead of returnKeyAction?

Yeah. All of returnKeyAction, submitBehavior, and submitAction face a similar problem but the latter two probably address it better than returnKeyAction. This has been changed to submitBehavior.

facebook-github-bot · 2022-05-02T19:19:49Z

@makovkastar has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

jamninetyfive · 2022-05-04T07:56:18Z

@tonyd33 any update? this pr sloved my problem , use multiline and onSubmitEditing same time and when press send don't track newline.

hsource · 2022-06-08T18:09:33Z

@makovkastar - we'd love to get this merged - is there anything else you need from @tonyd33 on this?

react-native-bot · 2022-07-22T20:15:05Z

This pull request was successfully merged by Tony Du in 1e3cb91.

^{When will my fix make it into a release? | Upcoming Releases}

…rop as deprecated in typescript declaration file of TextInput (#45588) Summary: Hi, I just found out that #33653 adds a new prop in `TextInput` that enables multiline `TextInput` be able to submit without blurring. It does that by adding a new prop called `submitBehavior` which accepts `'submit' | 'blurAndSubmit' | 'newline'`: https://github.com/facebook/react-native/blob/700b403e06fdcbcde2a4ade9570eb572431487ea/packages/react-native/Libraries/Components/TextInput/TextInput.js#L195 https://github.com/facebook/react-native/blob/700b403e06fdcbcde2a4ade9570eb572431487ea/packages/react-native/Libraries/Components/TextInput/TextInput.js#L910-L928 It also marks `blurOnSubmit` prop as deprecated since it can now be handled from `submitBehavior`: https://github.com/facebook/react-native/blob/700b403e06fdcbcde2a4ade9570eb572431487ea/packages/react-native/Libraries/Components/TextInput/TextInput.js#L896-L908 However, that PR doesn't update `TextInput.d.ts` file which results Typescript to complain that the type doesn't exist: <img width="760" alt="text_input_error" src="https://github.com/user-attachments/assets/2235cb36-1e4e-4ec9-a8b0-c09728a3336f"> So this PR adds and updates the types in declaration file to support them in Typescript <img width="520" alt="fixed" src="https://github.com/user-attachments/assets/a7a3a0c4-9f3e-4644-bfac-ae60ac21d0f7"> ## Changelog: [GENERAL] [FIXED] - add missing `submitBehavior` prop and mark `blurOnSubmit` prop as deprecated in Typescript declaration file of `TextInput` Pull Request resolved: #45588 Test Plan: Before: <img width="295" alt="before" src="https://github.com/user-attachments/assets/90ed0cd1-c127-4667-bf72-6b5317ea4dd6"> After: <img width="589" alt="after1" src="https://github.com/user-attachments/assets/826002a4-45dc-4f97-882d-7622238ac766"> <img width="833" alt="after2" src="https://github.com/user-attachments/assets/467eeecd-4b0b-4740-ac78-253e3c7aa901"> Reviewed By: christophpurrer Differential Revision: D60107516 Pulled By: dmytrorykun fbshipit-source-id: ce79e41aefc1ef39dc1d44179405cf6a8d5e12de

Tony Du added 5 commits April 13, 2022 15:57

Add returnKeyAction on iOS

efdc2dd

Add returnKeyAction on Android

d99774a

Remove blurOnSubmit

d61a309

Migrate to returnKeyAction for Fabric

eb1f7ac

Cleanup code and comments

f3f759f

react-native-bot added the Type: Enhancement A new feature or enhancement of an existing feature. label Apr 15, 2022

react-native-bot added the No CLA Authors need to sign the CLA before a PR can be reviewed. label Apr 16, 2022

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 18, 2022

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Apr 18, 2022

react-native-bot removed the No CLA Authors need to sign the CLA before a PR can be reviewed. label Apr 18, 2022

Fix linting and test

716cbfd

tonyd33 force-pushed the returnkeyaction branch from 55ad402 to 716cbfd Compare April 19, 2022 00:28

lunaleaps reviewed Apr 20, 2022

View reviewed changes

Remove default value check

08b0071

Rename returnKeyAction to submitBehavior

b296dbd

facebook-github-bot closed this in 1e3cb91 Jul 22, 2022

react-native-bot added the Merged This PR has been merged. label Jul 22, 2022

shwanton mentioned this pull request Jan 25, 2023

[Fabric] Shim RCTTextInput microsoft/react-native-macos#1681

Merged

4 tasks

This was referenced May 3, 2023

TextInput with multiline not triggering onChangeText callback in 0.71.2 microsoft/react-native-macos#1788

Closed

Fix text input not correctly submitting events microsoft/react-native-macos#1811

Merged

jakex7 mentioned this pull request Apr 9, 2024

Multiline and returnLabelType="send' not working together? #43910

Closed

kirillzyusko mentioned this pull request Jul 22, 2024

Fails to avoid keyboard if TextInput is focused while keyboard is closing kirillzyusko/react-native-keyboard-controller#516

Closed

thisisgit mentioned this pull request Jul 23, 2024

fix: add missing submitBehavior prop type and mark blurOnSubmit prop as deprecated in typescript declaration file of TextInput #45588

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow multiline TextInputs be submittable without blurring #33653

Allow multiline TextInputs be submittable without blurring #33653

tonyd33 commented Apr 15, 2022

facebook-github-bot commented Apr 15, 2022

analysis-bot commented Apr 15, 2022 •

edited

Loading

facebook-github-bot commented Apr 18, 2022

analysis-bot commented Apr 18, 2022 •

edited

Loading

facebook-github-bot commented Apr 19, 2022

facebook-github-bot commented Apr 19, 2022

lunaleaps Apr 20, 2022

tonyd33 Apr 20, 2022

lunaleaps Apr 20, 2022

tonyd33 Apr 20, 2022

facebook-github-bot commented Apr 20, 2022

makovkastar commented Apr 25, 2022

tonyd33 commented Apr 27, 2022 •

edited

Loading

facebook-github-bot commented May 2, 2022

jamninetyfive commented May 4, 2022

hsource commented Jun 8, 2022

react-native-bot commented Jul 22, 2022

Allow multiline TextInputs be submittable without blurring #33653

Allow multiline TextInputs be submittable without blurring #33653

Conversation

tonyd33 commented Apr 15, 2022

Summary

Changelog

Test Plan

facebook-github-bot commented Apr 15, 2022

Action Required

Process

analysis-bot commented Apr 15, 2022 • edited Loading

facebook-github-bot commented Apr 18, 2022

analysis-bot commented Apr 18, 2022 • edited Loading

facebook-github-bot commented Apr 19, 2022

facebook-github-bot commented Apr 19, 2022

lunaleaps Apr 20, 2022

Choose a reason for hiding this comment

tonyd33 Apr 20, 2022

Choose a reason for hiding this comment

lunaleaps Apr 20, 2022

Choose a reason for hiding this comment

tonyd33 Apr 20, 2022

Choose a reason for hiding this comment

facebook-github-bot commented Apr 20, 2022

makovkastar commented Apr 25, 2022

tonyd33 commented Apr 27, 2022 • edited Loading

facebook-github-bot commented May 2, 2022

jamninetyfive commented May 4, 2022

hsource commented Jun 8, 2022

react-native-bot commented Jul 22, 2022

analysis-bot commented Apr 15, 2022 •

edited

Loading

analysis-bot commented Apr 18, 2022 •

edited

Loading

tonyd33 commented Apr 27, 2022 •

edited

Loading