Skip to content

[select] The hidden form input blocks implicit submission of a form without a submit button #6200

Open

Description

@fnbmap

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions