DropZone unexpectedly submits forms.

[adriantrunzo]

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

<button

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]

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.

[adriantrunzo]

Already fixed by #5958.