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
When using the usePress or useButton hooks, the result of the event handler may change the layout of the page (for example expanding/collapsing an area). This action might move another pressable element to the location at which the button was previously. On touch devices, this causes the element that moved to the location to have its own click/press handler triggered.
🤔 Expected Behavior?
When tapping an element with an onPress handler that changes the layout, no other element's onClick/onPress handler is triggered due to the layout change.
😯 Current Behavior
When tapping an element with an onPress handler on a mobile device, if that handler changes the page's layout such that another tappable element moves under the touch location, that element's onClick handler is triggered.
💁 Possible Solution
No response
🔦 Context
I implemented a hamburger menu that causes the menu to "fly in" from the right. The animation of the menu caused a link to move over the area of the button that opens the menu. On mobile devices, this sometimes caused the link to immediately be clicked, causing a navigation. (Workaround used: making the element clickable only after the animation is completed)
I implemented a text box with truncated text that should expand when clicking a "Read more" button, and be collapsible again. When collapsing, a link moves to the area where the collapse button was before the handler, causing a click on the link and therefore a navigation.
Provide a general summary of the issue here
When using the
usePress
oruseButton
hooks, the result of the event handler may change the layout of the page (for example expanding/collapsing an area). This action might move another pressable element to the location at which the button was previously. On touch devices, this causes the element that moved to the location to have its own click/press handler triggered.🤔 Expected Behavior?
When tapping an element with an onPress handler that changes the layout, no other element's onClick/onPress handler is triggered due to the layout change.
😯 Current Behavior
When tapping an element with an onPress handler on a mobile device, if that handler changes the page's layout such that another tappable element moves under the touch location, that element's onClick handler is triggered.
💁 Possible Solution
No response
🔦 Context
I implemented a hamburger menu that causes the menu to "fly in" from the right. The animation of the menu caused a link to move over the area of the button that opens the menu. On mobile devices, this sometimes caused the link to immediately be clicked, causing a navigation. (Workaround used: making the element clickable only after the animation is completed)
I implemented a text box with truncated text that should expand when clicking a "Read more" button, and be collapsible again. When collapsing, a link moves to the area where the collapse button was before the handler, causing a click on the link and therefore a navigation.
🖥️ Steps to Reproduce
A codesandbox with a minimal reproduction
You can reproduce the bug using both Firefox's and Chrome's devtools by simulating a touch device, or by using an actual touch device.
Version
react-aria 3.31.1
What browsers are you seeing the problem on?
Other
If other, please specify.
Mobile Firefox, Mobile Chrome, Firefox & Chrome with Touch simulation
What operating system are you using?
Linux / Android
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: