Skip to content

[combobox] Fix autofill and selected state edge cases#4972

Draft
atomiks wants to merge 3 commits into
mui:masterfrom
atomiks:codex/combobox-autofill-state-fixes
Draft

[combobox] Fix autofill and selected state edge cases#4972
atomiks wants to merge 3 commits into
mui:masterfrom
atomiks:codex/combobox-autofill-state-fixes

Conversation

@atomiks

@atomiks atomiks commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

Part of the Codex sweep. Ports the Select autofill and selected-state fixes (#4934) to Combobox, with the review findings from that port folded in.

Changes

  • Browser autofill matches an item's rendered label, not just its serialized value, so a primitive value="US">United States autofills correctly. Works for inline children and the items prop.
  • Field state (dirty, validation, error clearing) runs through the shared useValueChanged effects and respects onValueChange/onInputValueChange cancellation. A canceled autofill, selection, or input change no longer touches field state, and a canceled single selection keeps the popup open.
  • Multiple mode clears data-dirty when the value returns to its initial set, comparing element-by-element with the item comparator instead of by array reference.
  • When the input is inside the popup, the trigger's aria-controls points at the dialog popup (a stable ${rootId}-popup id shared by the popup and trigger) instead of the listbox.
  • Combobox.Label resolves to Combobox.Label.State in the generated docs.

Original findings addressed

  • Canceling a single-select item press still closed the popup; it now stays open, with a test.
  • The ${rootId}-popup id was built in both the popup and the trigger; it's now one getComboboxPopupId helper, with the custom-id path covered.
  • The autofill forceMounted mount was sticky and ran for multiple and none modes that never match; it's now scoped to single-selection autofill.

@atomiks atomiks added type: bug It doesn't behave as expected. component: combobox Changes related to the combobox component. labels Jun 3, 2026
@pkg-pr-new

pkg-pr-new Bot commented Jun 3, 2026

Copy link
Copy Markdown

commit: 8b0a579

@code-infra-dashboard

code-infra-dashboard Bot commented Jun 3, 2026

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 🔺+457B(+0.10%) 🔺+151B(+0.10%)

Details of bundle changes

Performance

Total duration: 1,263.23 ms -152.66 ms(-10.8%) | Renders: 50 (+0) | Paint: 1,893.10 ms -243.08 ms(-11.4%)

Test Duration Renders
Mixed surface mount (app-like density) 86.11 ms 🔺+16.99 ms(+24.6%) 5 (+0)
Tabs mount (200 instances) 228.38 ms ▼-75.38 ms(-24.8%) 4 (+0)
Slider mount (300 instances) 153.35 ms ▼-55.12 ms(-26.4%) 3 (+0)
Checkbox mount (500 instances) 61.73 ms ▼-27.99 ms(-31.2%) 1 (+0)
Popover mount (300 instances) 64.03 ms ▼-20.45 ms(-24.2%) 1 (+0)

7 tests within noise — details


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

@netlify

netlify Bot commented Jun 3, 2026

Copy link
Copy Markdown

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 8b0a579
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6a291c2020e63c0008b527ab
😎 Deploy Preview https://deploy-preview-4972--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

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.

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

Labels

component: combobox Changes related to the combobox component. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant