Align multi-line TextInput onSubmitEditing with Android #463

tido64 · 2020-06-19T09:37:34Z

I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
I am making a fix / change for the macOS implementation of react-native
I am making a change required for Microsoft usage of react-native

Summary

The current multi-line TextInput onSubmitEditing behaviour in macOS deviates from upstream.

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.

-- https://reactnative.dev/docs/textinput#bluronsubmit

Changelog

[macOS] [Fixed] - Align multi-line TextInput onSubmitEditing with Android

Test Plan

Go to RNTester > TextInput
Search for "submit"
Enter something in the multi-line TextInput and press enter
An alert should appear and no newline is inserted
Modify the example to set onSubmitEditing=false (patch provided below)
Repeat step 1-3, no alert should appear and newlines should be inserted

diff --git a/RNTester/js/examples/TextInput/TextInputExample.ios.js b/RNTester/js/examples/TextInput/TextInputExample.ios.js
index f21ca72d3..9e07c903b 100644
--- a/RNTester/js/examples/TextInput/TextInputExample.ios.js
+++ b/RNTester/js/examples/TextInput/TextInputExample.ios.js
@@ -898,9 +898,9 @@ exports.examples = [
         <View>
           <TextInput
             style={styles.multiline}
-            placeholder="blurOnSubmit = true"
+            placeholder="blurOnSubmit = false"
             returnKeyType="next"
-            blurOnSubmit={true}
+            blurOnSubmit={false}
             multiline={true}
             onSubmitEditing={event =>
               Alert.alert('Alert', event.nativeEvent.text)

Microsoft Reviewers: Open in CodeFlow

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. -- https://reactnative.dev/docs/textinput#bluronsubmit

tido64 · 2020-06-19T10:03:32Z

Libraries/Text/TextInput/RCTBaseTextInputView.m

+#if TARGET_OS_OSX // [TODO(macOS Candidate ISS#2710739)
+  if (_blurOnSubmit) {
+#endif // ]TODO(macOS Candidate ISS#2710739)
+    [_eventDispatcher sendTextEventWithType:RCTTextEventTypeSubmit
+                                   reactTag:self.reactTag
+                                       text:self.backedTextInputView.attributedText.string
+                                        key:nil
+                                 eventCount:_nativeEventCount];
+#if TARGET_OS_OSX // [TODO(macOS Candidate ISS#2710739)
+  }
+#endif // ]TODO(macOS Candidate ISS#2710739)


Upstream: facebook#29177

Align multi-line TextInput onSubmitEditing with Android

5d7014e

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. -- https://reactnative.dev/docs/textinput#bluronsubmit

tido64 requested a review from tom-un as a code owner June 19, 2020 09:37

tido64 mentioned this pull request Jun 19, 2020

Fix onSubmitEditing not being called on single-line TextInput #458

Merged

4 tasks

tido64 commented Jun 19, 2020

View reviewed changes

tom-un approved these changes Jun 19, 2020

View reviewed changes

tom-un merged commit 2803dc8 into microsoft:master Jun 19, 2020

tido64 deleted the align-multiline-textinput-android branch June 19, 2020 21:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Align multi-line TextInput onSubmitEditing with Android #463

Align multi-line TextInput onSubmitEditing with Android #463

tido64 commented Jun 19, 2020 •

edited by ghost

Loading

tido64 Jun 19, 2020

Align multi-line TextInput onSubmitEditing with Android #463

Align multi-line TextInput onSubmitEditing with Android #463

Conversation

tido64 commented Jun 19, 2020 • edited by ghost Loading

Summary

Changelog

Test Plan

Microsoft Reviewers: Open in CodeFlow

tido64 Jun 19, 2020

Choose a reason for hiding this comment

tido64 commented Jun 19, 2020 •

edited by ghost

Loading