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 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.
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.
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):react-spectrum/packages/react-aria-components/src/DropZone.tsx
Line 118 in 64ed130
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
The text was updated successfully, but these errors were encountered: