React Native Text Input Blur Focus on Tap Touchable

Question

I have a standard TextInput wrapped in a scrollview. When I tap outside the textinput, the focus is blurred, as expected.

However, sometimes I tap a button when inside the textinput, expecting for the button to respond immediately. However, always the first tap merely unfocuses the textinput.

Expected behavior would be for that first tap to automatically unfocus the textinput and respond to the button tap at the same time. Is there any way to do that?

Answer 1

Most likely you need to change keyboardShouldPersistTaps prop of your ScrollView from never which is the default ... to handled ... and manually dismiss the keyboard on your button handler...

 <ScrollView keyboardShouldPersistTaps="always">...</ScrollView> 

'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.

'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.

'handled', the keyboard will not dismiss automatically when the tap was handled by children of the scroll view (or captured by an ancestor).

Edit

  <ScrollView
    keyboardShouldPersistTaps="handled" // <-- here
  >
    <TextInput />
    <Button
      title="Click Me"
      onPress={() => {
        Keyboard.dismiss(); // <--- here
        Alert.alert('Button', 'Clicked!');
      }}
    />
  </ScrollView>