Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow multiline TextInputs be submittable without blurring (#33653)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
+42 -12
View File
@@ -95,7 +95,7 @@ public class ReactEditText extends AppCompatEditText
private @Nullable TextWatcherDelegator mTextWatcherDelegator;
private int mStagedInputType;
protected boolean mContainsImages;
private @Nullable Boolean mBlurOnSubmit;
private @Nullable String mSubmitBehavior = null;
private boolean mDisableFullscreen;
private @Nullable String mReturnKeyType;
private @Nullable SelectionWatcher mSelectionWatcher;
@@ -135,7 +135,6 @@ public class ReactEditText extends AppCompatEditText
mDefaultGravityVertical = getGravity() & Gravity.VERTICAL_GRAVITY_MASK;
mNativeEventCount = 0;
mIsSettingTextFromJS = false;
mBlurOnSubmit = null;
mDisableFullscreen = false;
mListeners = null;
mTextWatcherDelegator = null;
@@ -256,7 +255,7 @@ public class ReactEditText extends AppCompatEditText
inputConnection, reactContext, this, mEventDispatcher);
}
if (isMultiline() && getBlurOnSubmit()) {
if (isMultiline() && (shouldBlurOnReturn() || shouldSubmitOnReturn())) {
// Remove IME_FLAG_NO_ENTER_ACTION to keep the original IME_OPTION
outAttrs.imeOptions &= ~EditorInfo.IME_FLAG_NO_ENTER_ACTION;
}
@@ -380,21 +379,52 @@ public class ReactEditText extends AppCompatEditText
mSelectionWatcher = selectionWatcher;
}
public void setBlurOnSubmit(@Nullable Boolean blurOnSubmit) {
mBlurOnSubmit = blurOnSubmit;
}
public void setOnKeyPress(boolean onKeyPress) {
mOnKeyPress = onKeyPress;
}
public boolean getBlurOnSubmit() {
if (mBlurOnSubmit == null) {
// Default blurOnSubmit
return isMultiline() ? false : true;
public boolean shouldBlurOnReturn() {
String submitBehavior = getSubmitBehavior();
boolean shouldBlur;
// Default shouldBlur
if (submitBehavior == null) {
if (!isMultiline()) {
shouldBlur = true;
} else {
shouldBlur = false;
}
} else {
shouldBlur = submitBehavior.equals("blurAndSubmit");
}
return mBlurOnSubmit;
return shouldBlur;
}
public boolean shouldSubmitOnReturn() {
String submitBehavior = getSubmitBehavior();
boolean shouldSubmit;
// Default shouldSubmit
if (submitBehavior == null) {
if (!isMultiline()) {
shouldSubmit = true;
} else {
shouldSubmit = false;
}
} else {
shouldSubmit = submitBehavior.equals("submit") || submitBehavior.equals("blurAndSubmit");
}
return shouldSubmit;
}
public String getSubmitBehavior() {
return mSubmitBehavior;
}
public void setSubmitBehavior(String submitBehavior) {
mSubmitBehavior = submitBehavior;
}
public void setDisableFullscreenUI(boolean disableFullscreenUI) {
ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
+23 -21
View File
@@ -441,9 +441,9 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
}
}
@ReactProp(name = "blurOnSubmit")
public void setBlurOnSubmit(ReactEditText view, @Nullable Boolean blurOnSubmit) {
view.setBlurOnSubmit(blurOnSubmit);
@ReactProp(name = "submitBehavior")
public void setSubmitBehavior(ReactEditText view, @Nullable String submitBehavior) {
view.setSubmitBehavior(submitBehavior);
}
@ReactProp(name = "onContentSizeChange", defaultBoolean = false)
@@ -1077,36 +1077,38 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent keyEvent) {
if ((actionId & EditorInfo.IME_MASK_ACTION) != 0 || actionId == EditorInfo.IME_NULL) {
boolean blurOnSubmit = editText.getBlurOnSubmit();
boolean isMultiline = editText.isMultiline();
boolean shouldSubmit = editText.shouldSubmitOnReturn();
boolean shouldBlur = editText.shouldBlurOnReturn();
// Motivation:
// * blurOnSubmit && isMultiline => Clear focus; prevent default behaviour (return
// * shouldSubmit => Clear focus; prevent default behavior (return true);
// * shouldBlur => Submit; prevent default behavior (return true);
// * !shouldBlur && !shouldSubmit && isMultiline => Perform default behavior (return
// false);
// * !shouldBlur && !shouldSubmit && !isMultiline => Prevent default behavior (return
// true);
// * blurOnSubmit && !isMultiline => Clear focus; prevent default behaviour (return
// true);
// * !blurOnSubmit && isMultiline => Perform default behaviour (return false);
// * !blurOnSubmit && !isMultiline => Prevent default behaviour (return true).
// Additionally we always generate a `submit` event.
if (shouldSubmit) {
EventDispatcher eventDispatcher = getEventDispatcher(reactContext, editText);
eventDispatcher.dispatchEvent(
new ReactTextInputSubmitEditingEvent(
reactContext.getSurfaceId(),
editText.getId(),
editText.getText().toString()));
}
EventDispatcher eventDispatcher = getEventDispatcher(reactContext, editText);
eventDispatcher.dispatchEvent(
new ReactTextInputSubmitEditingEvent(
reactContext.getSurfaceId(),
editText.getId(),
editText.getText().toString()));
if (blurOnSubmit) {
if (shouldBlur) {
editText.clearFocus();
}
// Prevent default behavior except when we want it to insert a newline.
if (blurOnSubmit || !isMultiline) {
if (shouldBlur || shouldSubmit || !isMultiline) {
return true;
}
// If we've reached this point, it means that the TextInput has 'blurOnSubmit' set to
// false and 'multiline' set to true. But it's still possible to get IME_ACTION_NEXT
// If we've reached this point, it means that the TextInput has 'submitBehavior' set
// nullish and 'multiline' set to true. But it's still possible to get IME_ACTION_NEXT
// and IME_ACTION_PREVIOUS here in case if 'disableFullscreenUI' is false and Android
// decides to render this EditText in the full screen mode (when a phone has the
// landscape orientation for example). The full screen EditText also renders an action