React-native: [Android][TextInput] onBlur doesn't work when clicking anywhere but another TextInput

[PhilipGarnero]

Description

Using android, onBlur is never called when clicking outside of the TextInput.
It works when clicking on another TextInput though.
The problem is that I only have one TextInput on my page and that I need to know whether the text input is focused or not in order to change my view's layout.
By the way, pressing the back button hides the keyboard but doesn't blur either.

Reproduction

Create two TextInput, with only one having an onBlur handler.
Focus the one with the handler and then click anywhere but the second TextInput.
Your handler isn't called. Click on the other input, it is called.

Additional Information

• React Native version: 0.37.0
• Platform: Android
• Operating System: MacOS

[PhilipGarnero]

The only workaround I've found for now is to wrap my view in a TouchableWithoutFeedback and call my onBlur handler on the pressIn. Ugly but working.

[mkonicek]

Can you provide a minimal amount of code to reproduce this on rnplay.org? This is necessary for people to be able to see and debug the issue being reported.

Closing this issue as it is not actionable. Please open a new one with an rnplay link (preferred), or link to a GitHub repo with clear instructions how to repro.

[rudyhuynh]

I also have this issue. Here is the code on rnplay.org: https://rnplay.org/apps/inL0Dw

[kiranps]

+1

[kiranps]

@mkonicek please reopen the issue

[kevmodonahoe]

I'm getting the same exact issue - would love any guidance on a sound solution!

[markmssd]

Same issue here on iOS! Did anyone find a solution?

[sergeylaptev]

The easiest fix is wrapping all TextInput components with ScrollView like this

<ScrollView keyboardShouldPersistTaps='handled'>
  <TextInput onBlur={() => console.log('blur')} />
</ScrollView>

[nischayv]

This is happening for me as well!

[brunoreis]

+1 here,

btw, unfortunately the Scroll View solution did not work and onEndEditing also is not triggering anything.

Same behaviour on Android and iosSimulator.

[naomipol]

This issue affects me too and has bad implication on my app's usability. None of the mentioned workarounds mention, work for me. Can't find any other one...
Any help? Please.

[foreverpw]

It will blur when you click a ScrollView

[ShMcK]

Also having the same issue on Android only. None of the work arounds are working for me.

[marioharper]

+1 on iOS, having to use <ScrollView> seems hacky.

I used <ScrollView scrollEnabled={false} keyboardShouldPersistTaps="handled"> as my main screen container to get around this.

[chtrinh]

FYI: for the unfortunate google search that lands here use this props to handle actions you would with onBlur (android)
<TextInput onEndEditing={(e) => this.handleBlurCheck(e.nativeEvent.text, params)} />