[Form] Form Fails to Submit via Enter Key When a Checkbox is Present

[iqingting]

Bug report

Current behavior

When the Enter key is pressed while an input field is focused, the checkbox becomes checked.

Expected behavior

The form is submitted.

Reproducible example

https://codesandbox.io/p/sandbox/sweet-villani-6znrs7?file=%2Fsrc%2FApp.tsx%3A53%2C26

Base UI version

1.0.0-beta.0

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

[mj12albert]

@iqingting Thanks for reporting this ~

Though not related to the bug, in your sandbox it's not necessary to use <Field.Control render={() => /* the checkbox component */} />, the latest docs on main has an example now: https://master--base-ui.netlify.app/react/components/checkbox#form-integration

[atomiks]

Looks like this is fixed on main already (fixed by #1909)

[iqingting]

@iqingting Thanks for reporting this ~

Though not related to the bug, in your sandbox it's not necessary to use <Field.Control render={() => /* the checkbox component */} />, the latest docs on main has an example now: https://master--base-ui.netlify.app/react/components/checkbox#form-integration

@mj12albert Thanks for the reminder.

I did read the form integration section for the checkbox, and it does work. However, this approach seems to go against the overall design of the Form component, as it makes the checkbox component behave differently from other input components.

[iqingting]

Looks like this is fixed on main already (fixed by #1909)

Waiting for the next release!

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@2071