Repository navigation
Description
Bug report
Current behavior
Select.Root always renders its hidden form input as an <input> without a type (so type="text"), aria-hidden, tabIndex={-1}, visually hidden. Per the HTML specification's implicit submission rule, a form without a submit button is only submitted by Enter when it contains at most one field that blocks implicit submission, and a text input is such a field. As a result, a form that has one text input next to a Select (or a Select inside Field.Root) is no longer submitted when the user presses Enter in the text input.
Measured with Base UI 1.9.0 in Chromium 156 and WebKit 27.2 (Playwright 1.64.1), form without a submit button, Enter in the text input:
| Form contains | Submitted on Enter? |
|---|---|
one <input type="text"> |
yes |
two <input type="text"> |
no (expected, per the spec) |
one text input + native <select> |
yes |
one text input + Select.Root (inside Field.Root, with or without name) |
no |
one text input + Select.Root disabled |
no |
Expected behavior
A Select does not change whether Enter submits the form, as with a native <select>, which does not block implicit submission.
Reproduction
import { Field } from '@base-ui/react/field';
import { Select } from '@base-ui/react/select';
export function Repro() {
return (
<form onSubmit={(event) => { event.preventDefault(); console.log('submitted'); }}>
<input aria-label="Name" />
<Field.Root name="country">
<Select.Root items={[{ value: 'DE', label: 'Germany' }]} defaultValue="DE">
<Select.Trigger><Select.Value /></Select.Trigger>
<Select.Portal><Select.Positioner><Select.Popup><Select.List>
<Select.Item value="DE"><Select.ItemText>Germany</Select.ItemText></Select.Item>
</Select.List></Select.Popup></Select.Positioner></Select.Portal>
</Select.Root>
</Field.Root>
</form>
);
}Focus "Name" and press Enter: nothing is logged. Remove the Select and "submitted" is logged.
Context
#5999 renders the input as type="hidden" when it takes no part in a form, but a Select with a name, with required or inside Field.Root keeps the text input, so the case above is not covered. We cannot switch the type ourselves: type="hidden" would bar the input from constraint validation, which breaks required. Could the hidden input be of a type that does not block implicit submission while still taking part in constraint validation, or could Base UI otherwise keep it from counting as a blocking field?
Base UI version: 1.9.0
Browsers: Chromium 156, WebKit 27.2 (both via Playwright 1.64.1)
Activity