React-native: TextInput with submit inside ScrollView does not clear focus - requires two taps first to clear focus, and then to execute whatever code in onPress (submit button)

[281330]

Using react-native version 0.26.2

I have just a TextInput and a "Go" button. If I wrap the TextInput and the "Go" button inside a ScrollView instead of just View, I have to first tap the "Go" button (or just anywhere outside of the TextInput) to clear the focus, and then click the "Go" button to actually execute the code inside the onPress. Am I doing something wrong, or is this expected behavior?

onGo() {
  this.props.searchByTextInput(this.state.searchString);
  this.setState({ searchString: undefined });
}

<ScrollView style={styles.container}>
  <TextInput
    ref='searchInput'
    style={styles.searchInput}
    value={this.state.searchString}
    onChangeText={(searchString) => this.setState({searchString})}
    placeholder='What do you want to see?'
  />
  <TouchableHighlight
    style={styles.button}
    onPress={this.onGo.bind(this)}
  >
    <Text style={styles.buttonText}>Go</Text>
  </TouchableHighlight>
  {
    this.props.data.photo.map((photo) => <Text key={photo.id}>{photo.title}</Text>)
  }
</ScrollView>

[281330]

Has anyone else encountered this issue?

[Jeepeng]

<ScrollView
style={styles.container}
keyboardShouldPersistTaps={true} >
...
</ScrollView>

https://facebook.github.io/react-native/docs/scrollview.html#keyboardshouldpersisttaps

[npomfret]

I had the same problem. Jeepeng is correct, adding keyboardShouldPersistTaps prop solves it

[281330]

awesome. closing.

[iiitmahesh]

It works for me. Version => RN40

<ScrollView keyboardShouldPersistTaps={true} keyboardDismissMode="on-drag">
    <TextInput>
</ScrollView>

http://stackoverflow.com/questions/36545145/react-native-keyboard-dismiss-when-changing-focus-in-scrollview/43867469#43867469

[mickr]

Using a boolean here is now deprecated... should now be keyboardShouldPersistTaps="always"