Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onPress causes events to propagate to underlying elements for touch devices #3281

Closed
chrisspadanuta opened this issue Jun 29, 2022 · 1 comment

Comments

@chrisspadanuta
Copy link

🐛 Bug Report

I'm using the usePress hook (part of @react-aria/interactions) to create a custom react component, which I call OnPress. I have a page setup with multiple layers to simulate having a modal overlapping some content. I open up Chrome Dev Tools and go to the Device Toolbar, which is able to emulate tablets and phones and other devices with touch interfaces, then I tap or click on an OnPress element.

🤔 Expected Behavior

My OnPress component that makes use of the usePress hook would not cause interaction with elements in a layer underneath it.

😯 Current Behavior

Tapping on my OnPress component causes elements in the layer underneath it to be interacted with. An anchor tag will visit its href, a div with an onClick attribute will fire its callback. This only happens with tablets and mobile devices, not in a desktop browser.

💁 Possible Solution

Is there a workaround for this? If I could call e.stopPropagation() that would presumably be how to fix it, but the event object usePress gives access to does not seem to have stopPropagation.

🔦 Context

This is a problem when trying to put an OnPress component into a modal in many places throughout my app. Anything the modal overlaps could be triggered if the OnPress lines up with it.

💻 Code Sample

In this example, there is an open button, which opens the "modal". After that, there are 3 close buttons. Clicking "Close 1" does not cause an issue because it has plain text underneath it. Clicking "Close 2" will trigger the anchor tag below it and clicking "Close 3" will trigger the onClick of the div element underneath it.

It is not possible to call e.stopPropagation() in the function that gets passed as the onPress to the usePress hook, as this will cause an error, presumably because usePress creates some kind of wrapper event around the actual event.

https://codesandbox.io/s/react-aria-usepress-propagation-hrdzve?file=/src/App.js
Using Chrome, open the example in a new window or go here: https://hrdzve.csb.app/

🌍 Your Environment

@react-aria/interactions: 3.9.1

Google Chrome, Dev Tools, Device Toolbar
Version 103.0.5060.53 (Official Build) (64-bit)
Set Dimensions to any phone, tablet, or even just Responsive will cause this to happen.

Operating systems:
macOS Monterey (12.4)
Linux Mint 20.2

@snowystinger
Copy link
Member

Thanks for the issue, closing as a duplicate #1513

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants