Blur TextInput when tapped outside of it

Question

I'm experiencing issue using TextInput expected behaviour is that when I tap on it, it is focused and keyboard is shown, and when I tap around it (anywhere besides the input), the TextInput should blur and keyboard will go away. At present this doesn't happen, text input stays focused no matter where I click. Is this expected behaviour, if so how is it usually handled?

<Image source={require('../assets/background.jpg')} style={{width: undefined; height: undefined; flex: 1;}}>
  <View>
    <TextInput placeholder="Email" style={{ width: 200; height: 40; }} />
  </View>
</Image>

@Mouser Added in, currently minimal setup atm, reason it is nested inside Image is to apply full background image to current scene — Ilja, Jan 02 '17 at 12:33
Check this link out and upvote the answer if it helps!http://stackoverflow.com/a/41381151/718968 — Irfan Ayaz, Jan 02 '17 at 12:46
@IrfanAyaz interesting read, but that answer implies triggering keyboard dismiss once certain action happens, i.e. submit. Thats fine, my question is more about asking why does input not blur when I press away from it? At the moment I am confused about this being default behaviour or an issue on my end. — Ilja, Jan 02 '17 at 13:36
This is not the default behaviour i suppose! Not for android too. — Irfan Ayaz, Jan 02 '17 at 13:55

score 16 · Accepted Answer · edited Sep 06 '19 at 01:11

16

Unfortunately that is expected behaviour.

You should wrap TextInput inside ScrollView (and disable scrolling if needed) and then with property keyboardShouldPersistTaps="never".

edited Sep 06 '19 at 01:11

Fook

5,320
7
35
57

answered Jan 02 '17 at 16:00

Samuli Hakoniemi

18,740
1
61
74

2

@notgiorgi you need to use `keyboardShouldPersistTaps="never"` now as `false` was deprecated. – Noitidart Jan 11 '18 at 21:50
2

Using `keyboardShouldPersistTaps="handled"` works better in my case. Otherwise keyboard is getting dismissed way too easily. Thanks for sharing this zvona, it was very useful info. – Noitidart Jan 11 '18 at 23:08
this does not work for me: react-native version: 51. On iOS – David Schumann Apr 13 '18 at 14:34
`keyboardShouldPersistTaps={false}` is deprecated. Use `never` instead. – Fook Sep 05 '19 at 21:41

Blur TextInput when tapped outside of it

1 Answers1

Linked