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

DropZone unexpectedly submits forms. #6230

Closed
adriantrunzo opened this issue Apr 18, 2024 · 2 comments
Closed

DropZone unexpectedly submits forms. #6230

adriantrunzo opened this issue Apr 18, 2024 · 2 comments
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@adriantrunzo
Copy link

adriantrunzo commented Apr 18, 2024

Provide a general summary of the issue here

The hidden button rendered by DropZone for focus behaviors is of type submit (since the type is not explicitly specified):

When using a DropZone inside of a form, activating the button with the keyboard (eg press enter or space) will submit the form. I don't think submitting the form is an expected behavior given that the button seems to be an accessibility implementation detail.

🤔 Expected Behavior?

Probably nothing should happen when that button is activated. When a FileTrigger is present, maybe the click event should be passed to the FileTrigger? The HTML file input acts as both a drag and drop area and the file trigger and both enter/space open the file menu rather than submit the form.

😯 Current Behavior

The DropZone focus trap button can submit the form (usually by accident).

💁 Possible Solution

Add type="button" to the instance of <button> linked above.

🔦 Context

While trying to use DropZone within a form, we noticed unintentional early submits from keyboard users activating the DropZone button rather than the FileTrigger.

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/heuristic-joji-c8gv78

In the codesandbox, move the keyboard focus to the DropZone and press enter or space. Notice the submitCount increase each time.

Version

React Aria Components 1.1.1

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

If other, please specify.

No response

What operating system are you using?

mac OS 14.3

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

@yihuiliao
Copy link
Member

Thanks for catching that! The visually hidden button is there for accessibility reasons so yeah, it shouldn’t be submitting anything and should have the type=“button” like you suggested.

@yihuiliao yihuiliao added bug Something isn't working good first issue Good for newcomers labels Apr 18, 2024
adriantrunzo added a commit to adriantrunzo/react-spectrum that referenced this issue Apr 19, 2024
fixes adobe#6230 - the focus trap button should be type button
so it does not accidentally submit forms.
@adriantrunzo
Copy link
Author

Already fixed by #5958.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants