[select][combobox] Ignore hidden-input changes while readonly or disabled

[lunaxislu]

Fixes #4809.

Follow-up to #4806.

SelectRoot and AriaCombobox use the same hidden-input autofill pattern that
OTPFieldRoot used before #4806, but their hidden-input onChange handlers
still only guard defaultPrevented, not disabled || readOnly.

This PR applies the same locked-state guard to those remaining handlers.

AriaCombobox is the shared root used by:

• Combobox.Root (selectionMode='single' | 'multiple')
• Autocomplete.Root (selectionMode='none')

What changed

• SelectRoot.tsx: hidden-input onChange guard now matches OTP's
• AriaCombobox.tsx: same one-line guard update
• Regression tests added for:
  • Select
  • Combobox (selectionMode='single')
  • Autocomplete (selectionMode='none')

Each regression test fires change on the hidden input and verifies that no public state change happens while readOnly or disabled.

No public API change.

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4810
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4810
  

commit: c358f7d

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+70B(+0.02%)	🔺+35B(+0.02%)

Details of bundle changes

Performance

Total duration: 1,100.96 ms -226.53 ms^(-17.1%) | Renders: 50 ⁽⁺⁰⁾ | Paint: 1,669.77 ms -337.90 ms^(-16.8%)

Test	Duration	Renders
Menu mount (300 instances)	119.58 ms ▼-38.37 ms(-24.3%)	2 (+0)
Menu open (500 items)	65.76 ms ▼-23.08 ms(-26.0%)	12 (+0)
Scroll Area mount (300 instances)	80.40 ms ▼-20.33 ms(-20.2%)	3 (+0)
Dialog mount (300 instances)	48.19 ms ▼-13.46 ms(-21.8%)	1 (+0)

8 tests within noise — details

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	c358f7d
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6a05d3d07ceb03000894abc8
😎 Deploy Preview	https://deploy-preview-4810--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[atomiks]

Code Review (GPT-5.5)

Request changes 🔴 because the same readOnly hidden-input autofill path still exists in NumberField, and the new regression coverage can be much smaller.

1. Bugs / Issues

1. 🔴 NumberField still accepts hidden-input autofill while readOnly (blocking)

The PR fixes Select and AriaCombobox, but NumberField has the same supported hidden-input autofill path and still only guards defaultPrevented. By code reading, a readOnly NumberField can still update through this hidden input because the input does not receive readOnly, and the handler does not check the root locked state.

packages/react/src/number-field/root/NumberFieldRoot.tsx

onChange(event) {
  // Workaround for https://github.com/facebook/react/issues/9023
  if (event.nativeEvent.defaultPrevented) {
    return;
  }

  // Handle browser autofill.
  const nextValue = event.currentTarget.valueAsNumber;
  const parsedValue = Number.isNaN(nextValue) ? null : nextValue;

  setDirty(parsedValue !== validityData.initialValue);
  setValue(parsedValue, details);
}

This leaves the same class of bug open in another public component that already has a hidden-input browser autofill test.

Fix: Apply the same locked-state guard to NumberFieldRoot and add a regression for at least readOnly hidden-input autofill; include event.preventBaseUIHandler?.() there too when the handler is wrapped by Field.Root.

2. 🟡 The locked-state regression tests can be table-driven (non-blocking)

The new tests repeat the same matrix several times: readOnly vs disabled, inside Field.Root vs outside Field.Root, then the same hidden-input change and “no public state changed” assertions. That makes this bug fix look larger than it is.

packages/react/src/select/root/SelectRoot.test.tsx

it('ignores hidden-input autofill when readOnly', async () => { ... });
it('ignores hidden-input autofill when disabled', async () => { ... });
it('ignores hidden-input autofill when readOnly outside Field', async () => { ... });
it('ignores hidden-input autofill when disabled outside Field', async () => { ... });

Recommendation: Extract small render/assert helpers per component and drive the lock state with it.each(['readOnly', 'disabled'] as const). For Select and Combobox, a second table dimension for withField would keep the Field error assertion where it matters while removing most of the duplicated JSX.

2. Simplification Opportunities

The production change is already close to minimal for Select and AriaCombobox. If NumberField is included too, a tiny shared predicate may be worth it, for example “ignore this hidden input change when the native event was already prevented or the root is locked, and prevent the Field validation handler when possible.” I would only add that helper if it removes duplication across Select, AriaCombobox, and NumberField; otherwise the source-level inline guard is fine.