Summary
Using a dropdown, on react-native-web, in safari, upon clicking on the picker an event is propagated to the parent as onTouchStart. When selecting an event in the dropdown list no event is propagated to the parent. Thus when the dropdown closes and you move the mouse around the parent registers that as a panResponderEvent , which doesn't play nicely when using e.g. a PanGestureHandler from react-native-gesture-handler. Note that I've only been able to confirm this as an issue in Safari on MacOS, and does not seem to occur in Chrome.
Pop the web window out using the icon circled in the below screenshot
Select an item from the list
Drag your pointer across the window and watch the background color flicker
Suggestion on how to solve
If we can access the underlying html component we should be able to solve it by adding an event listener which prevents the click from propagating:
Summary Using a dropdown, on react-native-web, in safari, upon clicking on the picker an event is propagated to the parent as
onTouchStart. When selecting an event in the dropdown list no event is propagated to the parent. Thus when the dropdown closes and you move the mouse around the parent registers that as apanResponderEvent, which doesn't play nicely when using e.g. aPanGestureHandlerfromreact-native-gesture-handler. Note that I've only been able to confirm this as an issue in Safari on MacOS, and does not seem to occur in Chrome.Reproducible demo
On a mac running macOS 11.4 go to https://snack.expo.dev/@rskogeby/crabby-yogurt,
Pop the web window out using the icon circled in the below screenshot
Select an item from the list
Drag your pointer across the window and watch the background color flicker
Suggestion on how to solve If we can access the underlying html component we should be able to solve it by adding an event listener which prevents the click from propagating: