Enable blurOnSubmit for text input in android

Summary:PR for https://github.com/facebook/react-native/issues/6098, Added tests to UIExplorer based on existing iOS example.

Before:
![blur_true](https://cloud.githubusercontent.com/assets/11550281/13401854/cd66117a-df33-11e5-875d-e1f132e2fc82.gif)

After:
![blur_false](https://cloud.githubusercontent.com/assets/11550281/13401874/de1dd1ce-df33-11e5-8210-e6bee80240fb.gif)
Closes https://github.com/facebook/react-native/pull/6215

Differential Revision: D3000042

Pulled By: mkonicek

fb-gh-sync-id: 7f01270580b198498505d92e38a456c0b3a01488
shipit-source-id: 7f01270580b198498505d92e38a456c0b3a01488
This commit is contained in:
AbilashK 2016-03-02 07:06:37 -08:00 committed by Facebook Github Bot 4
parent f827f7b79a
commit ab12189f87
4 changed files with 75 additions and 2 deletions

View File

@ -178,6 +178,60 @@ class TokenizedTextExample extends React.Component {
} }
} }
var BlurOnSubmitExample = React.createClass({
focusNextField(nextField) {
this.refs[nextField].focus();
},
render: function() {
return (
<View>
<TextInput
ref="1"
style={styles.singleLine}
placeholder="blurOnSubmit = false"
returnKeyType="next"
blurOnSubmit={false}
onSubmitEditing={() => this.focusNextField('2')}
/>
<TextInput
ref="2"
style={styles.singleLine}
keyboardType="email-address"
placeholder="blurOnSubmit = false"
returnKeyType="next"
blurOnSubmit={false}
onSubmitEditing={() => this.focusNextField('3')}
/>
<TextInput
ref="3"
style={styles.singleLine}
keyboardType="url"
placeholder="blurOnSubmit = false"
returnKeyType="next"
blurOnSubmit={false}
onSubmitEditing={() => this.focusNextField('4')}
/>
<TextInput
ref="4"
style={styles.singleLine}
keyboardType="numeric"
placeholder="blurOnSubmit = false"
blurOnSubmit={false}
onSubmitEditing={() => this.focusNextField('5')}
/>
<TextInput
ref="5"
style={styles.singleLine}
keyboardType="numbers-and-punctuation"
placeholder="blurOnSubmit = true"
returnKeyType="done"
/>
</View>
);
}
});
var styles = StyleSheet.create({ var styles = StyleSheet.create({
multiline: { multiline: {
height: 60, height: 60,
@ -286,6 +340,10 @@ exports.examples = [
return <View>{examples}</View>; return <View>{examples}</View>;
} }
}, },
{
title: 'Blur on submit',
render: function(): ReactElement { return <BlurOnSubmitExample />; },
},
{ {
title: 'Event handling', title: 'Event handling',
render: function(): ReactElement { return <TextEventsExample />; }, render: function(): ReactElement { return <TextEventsExample />; },

View File

@ -283,7 +283,6 @@ var TextInput = React.createClass({
* multiline fields. Note that for multiline fields, setting blurOnSubmit * multiline fields. Note that for multiline fields, setting blurOnSubmit
* to true means that pressing return will blur the field and trigger the * to true means that pressing return will blur the field and trigger the
* onSubmitEditing event instead of inserting a newline into the field. * onSubmitEditing event instead of inserting a newline into the field.
* @platform ios
*/ */
blurOnSubmit: PropTypes.bool, blurOnSubmit: PropTypes.bool,
/** /**
@ -505,6 +504,7 @@ var TextInput = React.createClass({
onTextInput={this._onTextInput} onTextInput={this._onTextInput}
onEndEditing={this.props.onEndEditing} onEndEditing={this.props.onEndEditing}
onSubmitEditing={this.props.onSubmitEditing} onSubmitEditing={this.props.onSubmitEditing}
blurOnSubmit={this.props.blurOnSubmit}
onLayout={this.props.onLayout} onLayout={this.props.onLayout}
password={this.props.password || this.props.secureTextEntry} password={this.props.password || this.props.secureTextEntry}
placeholder={this.props.placeholder} placeholder={this.props.placeholder}

View File

@ -67,6 +67,7 @@ public class ReactEditText extends EditText {
private @Nullable TextWatcherDelegator mTextWatcherDelegator; private @Nullable TextWatcherDelegator mTextWatcherDelegator;
private int mStagedInputType; private int mStagedInputType;
private boolean mContainsImages; private boolean mContainsImages;
private boolean mBlurOnSubmit;
private @Nullable SelectionWatcher mSelectionWatcher; private @Nullable SelectionWatcher mSelectionWatcher;
private final InternalKeyListener mKeyListener; private final InternalKeyListener mKeyListener;
@ -84,6 +85,7 @@ public class ReactEditText extends EditText {
mNativeEventCount = 0; mNativeEventCount = 0;
mIsSettingTextFromJS = false; mIsSettingTextFromJS = false;
mIsJSSettingFocus = false; mIsJSSettingFocus = false;
mBlurOnSubmit = true;
mListeners = null; mListeners = null;
mTextWatcherDelegator = null; mTextWatcherDelegator = null;
mStagedInputType = getInputType(); mStagedInputType = getInputType();
@ -179,6 +181,14 @@ public class ReactEditText extends EditText {
mSelectionWatcher = selectionWatcher; mSelectionWatcher = selectionWatcher;
} }
public void setBlurOnSubmit(boolean blurOnSubmit) {
mBlurOnSubmit = blurOnSubmit;
}
public boolean getBlurOnSubmit() {
return mBlurOnSubmit;
}
/*protected*/ int getStagedInputType() { /*protected*/ int getStagedInputType() {
return mStagedInputType; return mStagedInputType;
} }

View File

@ -181,6 +181,11 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
} }
} }
@ReactProp(name = "blurOnSubmit", defaultBoolean = true)
public void setBlurOnSubmit(ReactEditText view, boolean blurOnSubmit) {
view.setBlurOnSubmit(blurOnSubmit);
}
@ReactProp(name = "placeholder") @ReactProp(name = "placeholder")
public void setPlaceholder(ReactEditText view, @Nullable String placeholder) { public void setPlaceholder(ReactEditText view, @Nullable String placeholder) {
view.setHint(placeholder); view.setHint(placeholder);
@ -493,7 +498,7 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
SystemClock.nanoTime(), SystemClock.nanoTime(),
editText.getText().toString())); editText.getText().toString()));
} }
return false; return !editText.getBlurOnSubmit();
} }
}); });
} }