Implements blurOnSubmit

Summary: The default value (to retain current behavior) is set to `true`. Setting the value to `false` will prevent the textField from blurring but still fire the `onSubmitEditing` callback. However, the `onEndEditing` callback will not be fired.

Addresses issue: https://github.com/facebook/react-native/issues/2129
Closes https://github.com/facebook/react-native/pull/2149

Reviewed By: svcscm

Differential Revision: D2619822

Pulled By: nicklockwood

fb-gh-sync-id: 9a61152892f4afb5c6c53e7b38dffae13bc7e13f

Examples/UIExplorer/TextInputExample.ios.js

@@ -120,6 +120,60 @@ class RewriteExample extends React.Component {
   }
 }
 
+var BlurOnSubmitExample = React.createClass({
+  focusNextField(nextField) {
+    this.refs[nextField].focus()
+  },
+
+  render: function() {
+    return (
+      <View>
+        <TextInput
+          ref='1'
+          style={styles.default}
+          placeholder='blurOnSubmit = false'
+          returnKeyType='next'
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('2')}
+        />
+        <TextInput
+          ref='2'
+          style={styles.default}
+          keyboardType='email-address'
+          placeholder='blurOnSubmit = false'
+          returnKeyType='next'
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('3')}
+        />
+        <TextInput
+          ref='3'
+          style={styles.default}
+          keyboardType='url'
+          placeholder='blurOnSubmit = false'
+          returnKeyType='next'
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('4')}
+        />
+        <TextInput
+          ref='4'
+          style={styles.default}
+          keyboardType='numeric'
+          placeholder='blurOnSubmit = false'
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('5')}
+        />
+        <TextInput
+          ref='5'
+          style={styles.default}
+          keyboardType='numbers-and-punctuation'
+          placeholder='blurOnSubmit = true'
+          returnKeyType='done'
+        />
+      </View>
+    );
+  }
+});
+
 var styles = StyleSheet.create({
   page: {
     paddingBottom: 300,
@@ -443,5 +497,9 @@ exports.examples = [
         </View>
       );
     }
-  }
+  },
+  {
+    title: 'Blur on submit',
+    render: function(): ReactElement { return <BlurOnSubmitExample />; },
+  },
 ];

Libraries/Components/TextInput/TextInput.js

@@ -47,6 +47,10 @@ if (Platform.OS === 'android') {
   var RCTTextField = requireNativeComponent('RCTTextField', null);
 }
 
+type DefaultProps = {
+  blurOnSubmit: boolean;
+};
+
 type Event = Object;
 
 /**
@@ -283,6 +287,12 @@ var TextInput = React.createClass({
      * @platform ios
      */
     selectTextOnFocus: PropTypes.bool,
+    /**
+     * If true, the text field will blur when submitted.
+     * The default value is true.
+     * @platform ios
+     */
+    blurOnSubmit: PropTypes.bool,
     /**
      * Styles
      */
@@ -298,6 +308,12 @@ var TextInput = React.createClass({
     underlineColorAndroid: PropTypes.string,
   },
 
+  getDefaultProps: function(): DefaultProps {
+    return {
+      blurOnSubmit: true,
+    };
+  },
+
   /**
    * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We
    * make `this` look like an actual native component class.

Libraries/Text/RCTTextField.h

@@ -16,6 +16,7 @@
 @property (nonatomic, assign) BOOL caretHidden;
 @property (nonatomic, assign) BOOL autoCorrect;
 @property (nonatomic, assign) BOOL selectTextOnFocus;
+@property (nonatomic, assign) BOOL blurOnSubmit;
 @property (nonatomic, assign) UIEdgeInsets contentInset;
 @property (nonatomic, strong) UIColor *placeholderTextColor;
 @property (nonatomic, assign) NSInteger mostRecentEventCount;
@@ -26,5 +27,6 @@
 
 - (void)textFieldDidChange;
 - (void)sendKeyValueForString:(NSString *)string;
+- (BOOL)textFieldShouldEndEditing:(RCTTextField *)textField;
 
 @end

Libraries/Text/RCTTextField.m

@@ -20,6 +20,7 @@
   NSMutableArray<UIView *> *_reactSubviews;
   BOOL _jsRequestingFirstResponder;
   NSInteger _nativeEventCount;
+  BOOL _submitted;
 }
 
 - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
@@ -165,6 +166,7 @@ static void RCTUpdatePlaceholder(RCTTextField *self)
 }
 - (void)textFieldSubmitEditing
 {
+  _submitted = YES;
   [_eventDispatcher sendTextEventWithType:RCTTextEventTypeSubmit
                                  reactTag:self.reactTag
                                      text:self.text
@@ -186,6 +188,15 @@ static void RCTUpdatePlaceholder(RCTTextField *self)
                                eventCount:_nativeEventCount];
 }
 
+- (BOOL)textFieldShouldEndEditing:(RCTTextField *)textField
+{
+  if (_submitted) {
+    _submitted = NO;
+    return _blurOnSubmit;
+  }
+  return YES;
+}
+
 - (BOOL)becomeFirstResponder
 {
   _jsRequestingFirstResponder = YES;

Libraries/Text/RCTTextFieldManager.m

@@ -69,6 +69,11 @@ RCT_EXPORT_MODULE()
   return YES;
 }
 
+- (BOOL)textFieldShouldEndEditing:(RCTTextField *)textField
+{
+  return [textField textFieldShouldEndEditing:textField];
+}
+
 RCT_EXPORT_VIEW_PROPERTY(caretHidden, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(autoCorrect, BOOL)
 RCT_REMAP_VIEW_PROPERTY(editable, enabled, BOOL)
@@ -79,6 +84,7 @@ RCT_EXPORT_VIEW_PROPERTY(maxLength, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(clearButtonMode, UITextFieldViewMode)
 RCT_REMAP_VIEW_PROPERTY(clearTextOnFocus, clearsOnBeginEditing, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(selectTextOnFocus, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(blurOnSubmit, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(keyboardType, UIKeyboardType)
 RCT_EXPORT_VIEW_PROPERTY(returnKeyType, UIReturnKeyType)
 RCT_EXPORT_VIEW_PROPERTY(enablesReturnKeyAutomatically, BOOL)