[bug]: FE: form doesn't submit when it contains uploadthing dropzone

[soulr344]

Provide environment information

System:
    OS: Linux 6.7 Garuda Linux
    CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
    Memory: 5.13 GB / 15.46 GB
    Container: Yes
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 18.19.1 - /usr/local/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
    bun: 1.0.26 - ~/.bun/bin/bun
  npmPackages:
    @uploadthing/react: ^6.4.0 => 6.4.0 
    typescript: ^5 => 5.4.3 
    uploadthing: ^6.6.0 => 6.6.0

Describe the bug

When you have a UploadDropzone wrapped in a form, and then press enter on a input in the form, the form is expected to submit, but with a UploadDropzone inside, it doesn't submit.

Repo with reproduction: https://github.com/soulr344/uploadthing-bug-form Live reproduction: https://uploadthing-bug-form.vercel.app/bug

Link to reproduction

https://uploadthing-bug-form.vercel.app/bug

To reproduce

Open the link above, you should have a form in there. Type something in the demo input, and press enter. You should get a message saying the form is submitted at the end of the form. Then, click on reset status, tick the "Enable Uploadthing Field", type something on the Demo input and press enter. It doesnt submit anymore.

Additional information

No response

👨‍👧‍👦 Contributing

• [x] 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[markflorkowski]

Seems to work as long as a file is selected in the dropzone. 🤔

Edit: Not actually working, but the behavior is different. Hitting enter in the text input causes the dropzone to submit.

https://github.com/pingdotgg/uploadthing/assets/11494384/b173564f-96e6-49f8-8329-4388a7f758be

[markflorkowski]

Yeah, it seems like the dropzone is capturing presses of enter so they don't make it to your form. Looking into this more now