Allow multiline TextInputs be submittable without blurring (#33653)

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.

![multiline-momentary-blur](https://user-images.githubusercontent.com/22553678/163596940-aae779f5-4d2a-4425-8ed0-e4aa77b90699.gif)

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/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

Pull Request resolved: https://github.com/facebook/react-native/pull/33653

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 |
| --- | -- |
| ![android-returnkeyaction-test](https://user-images.githubusercontent.com/22553678/163597864-2e306f98-7b6e-4ddf-8a35-625d397d3dce.gif) | ![ios-returnkeyaction-test](https://user-images.githubusercontent.com/22553678/163598407-9e059f74-3549-4b46-8e03-c19bfaa6dd3d.gif)  |

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

![multiline-no-momentary-blur](https://user-images.githubusercontent.com/22553678/163598810-f3a71d62-5514-486e-bf6a-79169fe86378.gif)

Reviewed By: yungsters

Differential Revision: D35735249

Pulled By: makovkastar

fbshipit-source-id: 1f2237a2a5e11dd141165d7568c91c9824bd6f25
This commit is contained in:
Tony Du
2022-07-22 13:08:45 -07:00
committed by Facebook GitHub Bot
parent ccdf9ac985
commit 1e3cb91707
22 changed files with 351 additions and 95 deletions
@@ -66,6 +66,8 @@ export type ReturnKeyType =
| 'route'
| 'yahoo';
export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
export type NativeProps = $ReadOnly<{|
// This allows us to inherit everything from ViewProps except for style (see below)
// This must be commented for Fabric codegen to work.
@@ -520,9 +522,34 @@ export type NativeProps = $ReadOnly<{|
* multiline fields. Note that for multiline fields, setting `blurOnSubmit`
* to `true` means that pressing return will blur the field and trigger the
* `onSubmitEditing` event instead of inserting a newline into the field.
*
* @deprecated
* Note that `submitBehavior` now takes the place of `blurOnSubmit` and will
* override any behavior defined by `blurOnSubmit`.
* @see submitBehavior
*/
blurOnSubmit?: ?boolean,
/**
* When the return key is pressed,
*
* For single line inputs:
*
* - `'newline`' defaults to `'blurAndSubmit'`
* - `undefined` defaults to `'blurAndSubmit'`
*
* For multiline inputs:
*
* - `'newline'` adds a newline
* - `undefined` defaults to `'newline'`
*
* For both single line and multiline inputs:
*
* - `'submit'` will only send a submit event and not blur the input
* - `'blurAndSubmit`' will both blur the input and send a submit event
*/
submitBehavior?: ?SubmitBehavior,
/**
* Note that not all Text styles are supported, an incomplete list of what is not supported includes:
*
@@ -657,7 +684,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
process: require('../../StyleSheet/processColor'),
},
textDecorationLine: true,
blurOnSubmit: true,
submitBehavior: true,
textAlignVertical: true,
fontStyle: true,
textShadowOffset: true,