diff --git a/Examples/UIExplorer/TextInputExample.ios.js b/Examples/UIExplorer/TextInputExample.ios.js index a4ae78e99728a3..df0407bdb153e8 100644 --- a/Examples/UIExplorer/TextInputExample.ios.js +++ b/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 ( + + this.focusNextField('2')} + /> + this.focusNextField('3')} + /> + this.focusNextField('4')} + /> + this.focusNextField('5')} + /> + + + ); + } +}); + var styles = StyleSheet.create({ page: { paddingBottom: 300, @@ -443,5 +497,9 @@ exports.examples = [ ); } - } + }, + { + title: 'Blur on submit', + render: function(): ReactElement { return ; }, + }, ]; diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index fe1f6f2060755e..b835f0698a32d4 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/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. diff --git a/Libraries/Text/RCTTextField.h b/Libraries/Text/RCTTextField.h index 3fab22f2451f82..99eadce9844746 100644 --- a/Libraries/Text/RCTTextField.h +++ b/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 diff --git a/Libraries/Text/RCTTextField.m b/Libraries/Text/RCTTextField.m index 954ae827f88ac7..6b11bdae5f9e0a 100644 --- a/Libraries/Text/RCTTextField.m +++ b/Libraries/Text/RCTTextField.m @@ -20,6 +20,7 @@ @implementation RCTTextField NSMutableArray *_reactSubviews; BOOL _jsRequestingFirstResponder; NSInteger _nativeEventCount; + BOOL _submitted; } - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher @@ -165,6 +166,7 @@ - (void)textFieldEndEditing } - (void)textFieldSubmitEditing { + _submitted = YES; [_eventDispatcher sendTextEventWithType:RCTTextEventTypeSubmit reactTag:self.reactTag text:self.text @@ -186,6 +188,15 @@ - (void)textFieldBeginEditing eventCount:_nativeEventCount]; } +- (BOOL)textFieldShouldEndEditing:(RCTTextField *)textField +{ + if (_submitted) { + _submitted = NO; + return _blurOnSubmit; + } + return YES; +} + - (BOOL)becomeFirstResponder { _jsRequestingFirstResponder = YES; diff --git a/Libraries/Text/RCTTextFieldManager.m b/Libraries/Text/RCTTextFieldManager.m index d0fdcb0feff796..88a59e1bda0796 100644 --- a/Libraries/Text/RCTTextFieldManager.m +++ b/Libraries/Text/RCTTextFieldManager.m @@ -69,6 +69,11 @@ - (BOOL)keyboardInputShouldDelete:(RCTTextField *)textField 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 @@ - (BOOL)keyboardInputShouldDelete:(RCTTextField *)textField 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)