onPress/onButton triggers click event on other element if layout changes based on onPress handler on touch devices

[jeyj0]

Provide a general summary of the issue here

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.

🖥️ 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.

• [ ] test on safari (no devices available)

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

[snowystinger]

I believe this is a dupe of https://github.com/adobe/react-spectrum/issues/1513