search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.11k stars 1.14k forks source link

Button type='submit' and custom usePress div pointer mobile event clicking on next screen with react router #7330

Open ShpetimA opened 3 weeks ago

ShpetimA commented 3 weeks ago

Provide a general summary of the issue here

Press events triggering on next screen when routing with react router.

I am assuming this is the same issue #7026 that this tries to fix but i am still going to report it since it might help having another case added.

🤔 Expected Behavior?

Whenever we click on a button on one screen and that button routes to a different route with the same layout it should not trigger the form submit event or the active browser event on the new button that appears.

😯 Current Behavior

https://github.com/user-attachments/assets/832186cf-e33e-40d1-a5df-89cf779463b0

When in mobile simulated touch view or in mobile device (tested on android). If we have two buttons on different screens both with type 'submit' if we switch screens in react router and the layout of both buttons is the same it should not trigger the event of submitting on the next button.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Have two routes in react router without layout changes where two buttons overlap and have type submits and you can achieve this bug. If the second button only has type submit and no onPress handler it automatically submits the form if it does have a onPress handler then in doesn't trigger the onPress event but the button seems to get focused by the browser.

https://codesandbox.io/p/sandbox/flamboyant-euler-src8pf?file=%2Fsrc%2FFirstPage.tsx%3A15%2C1&workspaceId=aaa23462-9fa5-46e4-a903-63e99d72520b

Version

3.31.0

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

LFDanLu commented 3 weeks ago

Verified on my Android device, unfortunately this happens because we actually allow the press event to go through if it is on a submit type button: https://github.com/adobe/react-spectrum/blob/09ccc53e71a0c423fea04bd9f8a80a6a97b14787/packages/%40react-aria/interactions/src/usePress.ts#L528-L532 as per the assumption described here. Will have to see if there are any alternatives checks that could be made but I'm not sure if we have enough information in usePress to know when it would be appropriate to not prevent default, especially for form submit buttons

ShpetimA commented 3 weeks ago

Now that i understand what is happening i can add some workaround in our codebases for example not using automatic submition if forms overlap but still as a temporary measure this should be included in the docs so that users can be informed of this behaviour.