CODEWITHSUNDEEP
javascriptreact-native
Qrow Saki
Qrow Saki

Reputation: 1052

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?

Upvotes: 4

Views: 4216

Answers (1)

Hend El-Sahli
Hend El-Sahli

Reputation: 6742

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>

Upvotes: 4

Related Questions