Item's onPress does not work when inside ScrollView
joonhocho opened this issue ยท 13 comments
As title says, selecting item is not working when nested inside a ScrollView.
Related facebook/react-native#7572
Do you have still problems with RN v0.26.2?
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?
@saemie Do you use the same code from the example? Do you test on the device or emulator?
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
After removing this following line, TouchOpactity onPress function is being called.
<TextInput
...
onEndEditing={e =>
this._showResults(false) || (onEndEditing && onEndEditing(e))
}
...
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
Thx @ltquang your suggestion to add the keyboardShouldPersistTaps={true}
prop to the ScrollView
seems to fix the issue.
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.
@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.
@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.
@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()
}
}
Hi
Hello,
I have 1 solution for you
please addkeyboardShouldPersistTaps={true}
in your scrollviewScrollView 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.