React-native: [ScrollView] Keyboard doesn't hide after focusing on TextInput

[skoob13]

There are two TextInput elements.

When I touch the first one, then the second one and finally the ScrollView which contains both of them, the keyboard doesn't hide. But I touch the second again and voila - the ScrollView hides my keyboard.
If I touch only one of those and then the ScrollView, it hides as normal as it should be.
Moving from one TextInput to another, the onBlur event doesn't appear to happen. Do you have any ideas why my keyboard doesn't hide?

[fjmorant]

I am having the same issue with ScrollView with version 0.7 (maybe this is fixed in 0.8rc) apparently the issue is with the prop keyboardShouldPersistTaps it doesn't work properly if you try to do the next:

• Type something in the first TextInput long enough, let's say 20 characters or more.
• Then type again something in the second TextInput, the same number of characters more or less again.
• If you tap somewhere in the ScrollView it should dismiss the keyboard but it doesn't it is still there

Sometimes the prop keyboardShouldPersistTaps works if you don't type a long text or if you type a long text but you don't jump to another text input (you have to type in 2 text inputs)

[alinz]

@skoob13, @javierM84
Here's the solution for this. First of if you are using 0.11.x you have to explicitly pass keyboardShouldPersistTaps={false} to your ScrollView or ListView. Second, if you have multiple text field and you want to make sure you can dismiss the keyboard if the user touch on ScrollView, you have to explicitly call focus() on each onFocus.

Here's a code for that

https://rnplay.org/apps/y0oAuQ

@brentvatne any thought on this?

[chirag04]

@alinz @brentvatne docs say false is the default behaviour for keyboardShouldPersistTaps. Seems like a bug?

FYI, I can produce this on master as well.

[chirag04]

@alinz Just saw you pull request on this. https://github.com/facebook/react-native/pull/3178. That clears everything. thanks.

[despairblue]

@alinz this is a workaround for the tap issue, but the onFocus event is dispatched too late, e.g. if you have a Touchable around the TextInput the Touchable's onPress event is dispatched before the TextInput can be focussed. This breaks the underline animation of the Material Design TextFields

The problem is that https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInputState.js#L40 isn't called when the second TextInput is tapped. That is because in https://github.com/facebook/react/blob/master/src/renderers/shared/event/EventPluginUtils.js#L187 there is a different dispatchListender listening to the TextInputs depending on which TextInput is focused first.

The first dispatchListender is https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/Touchable.js#L356 and works.
But the second is https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js#L264 and doesn't.

That means the second TextInput is never marked as focused.

[niftylettuce]

Still not working for me - when I click off a text input with a scroll view that's behind it, it doesn't blur.

[niftylettuce]

I have to explicity declare keyboardShouldPersistTaps={false}, it's like the default isn't working or something?

[Taakn]

+1 I am also having issues with events in ScrollView.

[shtefanntz]

+1 I'm having issues with this as well :(

side question: why would only ScrollView handle taps in a way that TextInputs lose focus and Views don't?

[everfire130]

+1 I'm having issues.Any solutions?

[ninjz]

I just added keyboardDismissMode="on-drag" to my Listview and was able to dismiss the keyboard on scroll. hope this helps

[someok]

Wrap the container with TouchableWithoutFeedback

onPress: TextInput.State.blurTextInput(TextInput.State.currentlyFocusedField
());

On Tue, May 31, 2016 at 4:02 PM Calvin Cheng [email protected]
wrote:

+1

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/2150#issuecomment-222618764,
or mute the thread
https://github.com/notifications/unsubscribe/ABc9iuNit9MnLFeBFscpMwy4UbJnRcW8ks5qG-swgaJpZM4FhWBC
.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/scrollview-keyboard-doesnt-hide-after-focusing-on-textinput

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.