React Native Text Input Blur Focus on Tap Touchable

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?

16 thoughts on “React Native Text Input Blur Focus on Tap Touchable”

  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>
    
    Reply

Leave a Comment