You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
The text was updated successfully, but these errors were encountered:
🐛 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 anonClick
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 objectusePress
gives access to does not seem to havestopPropagation
.🔦 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 theonPress
to theusePress
hook, as this will cause an error, presumably becauseusePress
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
The text was updated successfully, but these errors were encountered: