question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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)

See original GitHub issue

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>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
Jeepengcommented, Jul 1, 2016
<ScrollView
style={styles.container}
keyboardShouldPersistTaps={true} >
...
</ScrollView>

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

1reaction
mickrcommented, Jul 9, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

react native - Touchable Opacity Requires Two Taps to Submit ...
react native - Touchable Opacity Requires Two Taps to Submit When Keyboard Open - Passing keyboardShouldPersistTaps to ScrollView Does Not Work ...
Read more >
Button | Android Developers
OnClickListener() { public void onClick(View v) { // Code here executes on main thread after ... android:focusable, Controls whether a view can take...
Read more >
keyboardavoidingview modal | The search engine you control.
The problem with this code is that animation takes forever. First, modal show up, then keyboard and then (!!!) the input animates up....
Read more >
Xamarin.Forms Button - Microsoft Learn
The Button responds to a tap or click that directs an application to carry out a particular task.
Read more >
How to dismiss the keyboard for a TextField - Hacking with Swift
decimalPad , or .phonePad . If you're supporting only iOS 15 and later, you can activate and dismiss the keyboard for a text...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found