How do I get a React Native TextInput to maintain focus after submit?
I've submitted a PR with a blurOnSubmit
property.
Set it to false
and the TextInput
never blurs, onSubmitEditing
still fires though.
Hopefully it gets merged. :)
https://github.com/facebook/react-native/pull/2149
I came out with following (working) solution:
var NameInput = React.createClass({
getInitialState() {
return {
textValue: ''
}
},
clearAndRetainFocus: function(evt, elem) {
this.setState({textValue: elem.text});
setTimeout(function() {
this.setState({textValue: this.getInitialState().textValue});
this.refs.Name.focus();
}.bind(this), 0);
},
render() {
return(
<TextInput
ref='Name'
value={this.state.textValue}
onEndEditing={this.clearAndRetainFocus} />
)
}
});
So, basically when we end editing, we will set the textValue
state to the value of the TextInput
and right after that (in setTimeout
), we switch it back to default (empty) and retain focus on the element.