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

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

Open
ShpetimA opened this issue Nov 6, 2024 · 2 comments

Comments

@ShpetimA
Copy link

ShpetimA commented Nov 6, 2024

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

Screen.Recording.2024-11-07.at.12.31.37.AM.mov

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
Copy link
Member

LFDanLu commented Nov 7, 2024

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:

let onTouchEnd = (e: TouchEvent) => {
// Don't preventDefault if we actually want the default (e.g. submit/link click).
if (shouldPreventDefaultUp(e.currentTarget as Element)) {
e.preventDefault();
}
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
Copy link
Author

ShpetimA commented Nov 7, 2024

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.

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