search

software-mansion / radon-ide

VSCode extension that turns your editor into a fully fledged IDE for React Native and Expo.
https://ide.swmansion.com
Other
985 stars 33 forks source link

Prevent clicks on device screen behind the UrlBar and SelectDevice #673

Closed p-malecki closed 2 weeks ago

p-malecki commented 2 weeks ago

This PR addresses the issue where selecting items from UrlBar or DeviceSelect results in touch events interacting with elements underneath. This is especially problematic when the touch position is above the device screen, unintentionally sending touch to the device.

The likely cause is the Select.Item implementation in Radix's Select. A similar problem was reported in this Radix issue. That issue was closed as it was confirmed to be solved since the react-select 2.1.2-rc.8 version. However, updating the package didn't resolve our issue.

The root of the problem is that when an item is clicked, the select value changes so quickly that the popper disappears, causing the touch event to simultaneously click on the element behind it.

To solve it, an isOpen state has been added which manages the opening and closing of the Select.Content. This state is modified using setTimeout with a duration of 0 ms, delaying the state update (setOpen(!isOpen)) to the end of the JS call stack, which allows the touch event to complete before closing the Select.Content, preventing any accidental clicks.

Fixes #649

How Has This Been Tested:

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
radon-ide ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 29, 2024 6:27pm
kmagiera commented 2 weeks ago

I'd have hoped that instead of doing this we can have some more generic solution that isn't associated with the controls that display over the device. For example, the same problem applies to device settings menu and other menus, we don't want to keep adding workarounds to all the UI elements we have now and will add in the future.

I think the generic solution could be based on focus or event target mechanism for the events we receive. I also think that we should consider it for both mouse and keyboard events.

p-malecki commented 2 weeks ago

Suggestions have been applied in #685, so I am closing this PR.