Item's onPress does not work when inside ScrollView

[joonhocho]

As title says, selecting item is not working when nested inside a ScrollView.

[joonhocho]

Related facebook/react-native#7572

[mrlaessig]

Do you have still problems with RN v0.26.2?

[saemie]

I am getting the same problem with RN v0.26.2
onPress does not work for items passed to the renderItem property.

I'm testing this with the example app. Any idea what the problem may be?

[mrlaessig]

@saemie Do you use the same code from the example? Do you test on the device or emulator?

[ajoshdee]

Hi, I tested it using your example but I'm having a hard time selecting from the list returned by autocomplete. my autocomplete component is inside a scroll view

[bbalu]

After removing this following line, TouchOpactity onPress function is being called.
<TextInput
...
onEndEditing={e =>
this._showResults(false) || (onEndEditing && onEndEditing(e))
}
...

[ltquang]

Hello,
I have 1 solution for you
please add keyboardShouldPersistTaps={true} in your scrollview

ScrollView keyboardShouldPersistTaps={true}
.
   Autocomplete
                    ....
                    renderItem={data => (
                      <TouchableOpacity onPress={() => this.props.onSelectedProvinceChange(data)}>
                        <Text style={{color: Commons.Colors.gray_dark, fontFamily: Commons.Fonts.regular, fontSize: Commons.Fonts.p}}>{data}</Text>
                      </TouchableOpacity>
                    )}
                  />
/ScrollView

*It's work for me :) Hope to help you

[mrlaessig]

Thx @ltquang your suggestion to add the keyboardShouldPersistTaps={true} prop to the ScrollView seems to fix the issue.

[panuhorsmalahti]

While adding keyboardShouldPersistTaps to true (well, "always" these days) fixes this issue, I need to have keyboardShouldPersistTaps "never" to close the keyboard after clicking outside inputs. Therefore this solution is not suitable for me.

[armadillojim]

@panuhorsmalahti, have you tried setting keyboardShouldPersistTaps to handled? Dunno if that'll fix your issue, but it's worth a try. FWIW, I have a ScrollView with multiple autocomplete fields, and clicking outside them closes the keyboard for me.

[c-goettert]

@armadillojim 'handled' works great on android, but on iOS the autocomplete scroll still behaves buggy. Although in principle you can select elements and close the autocomplete window by tapped outside the range, the autocomplete view often closes randomly when scrolling inside the autocomplete-view.

[c-goettert]

@panuhorsmalahti I managed to get it working with keyboardShouldPersistTaps='always' and Naomipols solution for nested ScrollView from another thread.
To automatically dismiss the keyboard again (if the user taps outside the list), I just use componentDidUpdate of the Parent View, e.g. like this:

  componentDidUpdate (prevProps, prevState) {
    const previouslyEnabled = prevState.enableScrollViewScroll
    const newEnabled = this.state.enableScrollViewScroll
    // if scroll was just enabled again, that means user tapped outside of autocomplete list
    // -> manually dismiss keyboard then, because we set keyboardShouldPersistTaps to 'always'
    if (previouslyEnabled !== newEnabled && newEnabled) {
      Keyboard.dismiss()
    }
  }

[gauravgandhigg]

Hi

Hello,
I have 1 solution for you
please add keyboardShouldPersistTaps={true} in your scrollview

ScrollView keyboardShouldPersistTaps={true}
.
   Autocomplete
                    ....
                    renderItem={data => (
                      <TouchableOpacity onPress={() => this.props.onSelectedProvinceChange(data)}>
                        <Text style={{color: Commons.Colors.gray_dark, fontFamily: Commons.Fonts.regular, fontSize: Commons.Fonts.p}}>{data}</Text>
                      </TouchableOpacity>
                    )}
                  />
/ScrollView

*It's work for me :) Hope to help you

Hey So this solution also works when we use a picker inside a scrollview. Thank you.