[combobox] New `Combobox` and `Autocomplete` components by atomiks · Pull Request #2105 · mui/base-ui

atomiks · 2025-06-12T08:10:03Z

Closes #222

Combobox

Preview: https://deploy-preview-2105--base-ui.netlify.app/react/components/combobox

Perf: https://deploy-preview-2105--base-ui.netlify.app/experiments/combobox-perf

Autocomplete

Preview: https://deploy-preview-2105--base-ui.netlify.app/react/components/autocomplete

FilterableMenu

~~Preview: https://deploy-preview-2105--base-ui.netlify.app/react/components/filterable-menu~~ (will ship later)

To investigate in the future, possibly as separate components or new parts:

Combobox + Tabs - different semantics to the regular Tabs with virtual focus

pkg-pr-new · 2025-06-12T08:11:08Z

Open in StackBlitz

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

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

commit: 88e36a7

mui-bot · 2025-06-12T08:11:25Z

Bundle size report

Total Size Change: 🔺+301KB^(+20.91%) - Total Gzip Change: 🔺+103KB^(+20.17%)
Files: 71 total (2 added, 0 removed, 19 changed)

Show details for 71 more bundles

@base-ui-components/react parsed: 🔺+36.7KB^(+11.79%) gzip: 🔺+10.6KB^(+10.66%)
@base-ui-components/react/navigation-menu parsed: 🔺+1.76KB^(+1.96%) gzip: 🔺+731B^(+2.33%)
@base-ui-components/react/menu parsed: 🔺+1.68KB^(+1.48%) gzip: 🔺+660B^(+1.68%)
@base-ui-components/react/select parsed: 🔺+1.67KB^(+1.42%) gzip: 🔺+658B^(+1.61%)
@base-ui-components/react/context-menu parsed: 🔺+1.67KB^(+1.48%) gzip: 🔺+668B^(+1.71%)
@base-ui-components/react/tabs parsed: 🔺+808B^(+3.09%) gzip: 🔺+326B^(+3.46%)
@base-ui-components/react/toolbar parsed: 🔺+806B^(+4.12%) gzip: 🔺+344B^(+4.92%)
@base-ui-components/react/popover parsed: 🔺+776B^(+0.91%) gzip: 🔺+319B^(+1.06%)
@base-ui-components/react/radio-group parsed: 🔺+753B^(+3.55%) gzip: 🔺+324B^(+4.03%)
@base-ui-components/react/menubar parsed: 🔺+751B^(+3.47%) gzip: 🔺+325B^(+4.08%)
@base-ui-components/react/toggle-group parsed: 🔺+751B^(+5.03%) gzip: 🔺+331B^(+5.83%)
@base-ui-components/react/preview-card parsed: 🔺+489B^(+0.85%) gzip: 🔺+212B^(+1.03%)
@base-ui-components/react/tooltip parsed: 🔺+482B^(+0.76%) gzip: 🔺+202B^(+0.90%)
@base-ui-components/react/alert-dialog parsed: 🔺+287B^(+0.57%) gzip: 🔺+89B^(+0.50%)
@base-ui-components/react/dialog parsed: 🔺+286B^(+0.56%) gzip: 🔺+100B^(+0.56%)
@base-ui-components/react/accordion parsed: 🔺+55B^(+0.25%) gzip: 🔺+15B^(+0.19%)
@base-ui-components/react/radio parsed: 🔺+55B^(+0.38%) gzip: 🔺+5B^(+0.09%)
@base-ui-components/react/slider parsed: 🔺+55B^(+0.21%) gzip: 🔺+27B^(+0.27%)
@base-ui-components/react/toggle parsed: 🔺+55B^(+0.64%) gzip: 🔺+14B^(+0.39%)
@base-ui-components/react/combobox parsed: 🔺+128KB^(new) gzip: 🔺+43.8KB^(new)
@base-ui-components/react/autocomplete parsed: 🔺+124KB^(new) gzip: 🔺+42.9KB^(new)
@base-ui-components/react/avatar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/checkbox-group parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/collapsible parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/direction-provider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/field parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/fieldset parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/form parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/input parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/merge-props parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/meter parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/number-field parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/progress parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/scroll-area parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/separator parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/switch parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/toast parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/types parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/unstable-no-ssr parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/unstable-use-media-query parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/use-render parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/detectBrowser parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/error parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/fastObjectShallowCompare parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/generateId parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/getReactElementRef parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/inertValue parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/isElementDisabled parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/isMouseWithinBounds parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/mergeObjects parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/owner parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/reactVersion parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/safeReact parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/store parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useAnimationFrame parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useControlled parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useEnhancedClickHandler parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useEventCallback parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useForcedRerendering parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useId parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useInterval parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useIsoLayoutEffect parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useLatestRef parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useMergedRefs parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useOnFirstRender parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useOnMount parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useRefWithInit parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/useTimeout parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/visuallyHidden parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/utils/warn parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 88e36a7

netlify · 2025-06-12T08:12:20Z

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	`88e36a7`
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/68b851b9d2f27d0008545e3a
😎 Deploy Preview	https://deploy-preview-2105--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

docs/src/app/(public)/(content)/react/components/combobox/demos/hero/css-modules/index.tsx

michael-land · 2025-06-12T16:01:43Z

it would be really nice this component will also support autoHighlight, similar to MUI Autocomplete.

michaldudak

I haven't found any serious issues and the API looks solid. But there are many potential use cases we might not considered, so let's release this and see how the community feels about it. In case there's something fundamentally wrong (which I doubt), we still have time to fix before v1.

mui-bot · 2025-09-03T10:28:49Z

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui-components/react	🔺+36.7KB^(+11.79%)	🔺+10.6KB^(+10.66%)

Details of bundle changes

LukasTy

The components look amazing! 😍
That's a massive undertaking, awesome work. 💯 🚀
Sorry for a late review. 🙈
I will check a11y behavior next.

I have a behavioral observation:
The Autocomplete closes the items after searching and removing search query.
Is that the expected behavior? Or should it keep open with unfiltered items, just like before opening it?

Screen.Recording.2025-09-02.at.13.51.58.mov

LukasTy · 2025-09-02T10:57:41Z

docs/src/app/(public)/(content)/react/components/autocomplete/demos/async/css-modules/index.tsx

+  year: number;
+}
+
+const top100Movies: Movie[] = [


General nitpick: Is there a way to share this data between CSS Modules and Tailwind examples? 🤔

LukasTy · 2025-09-02T14:18:55Z

packages/react/src/autocomplete/root/AutocompleteRoot.test.tsx

+      );
+
+      const input = screen.getByRole<HTMLInputElement>('combobox');
+      fireEvent.click(input);


Nitpick

Suggested change

fireEvent.click(input);

await user.click(input);

packages/react/src/autocomplete/root/AutocompleteRoot.test.tsx

LukasTy · 2025-09-03T06:56:43Z

packages/react/src/autocomplete/root/AutocompleteRoot.test.tsx

+
+      expect(input).not.to.have.attribute('data-focused');
+
+      fireEvent.focus(input);


Nitpick: user.keyboard('{Tab}') would probably work as well. 🤔

packages/react/src/autocomplete/root/AutocompleteRoot.test.tsx

packages/react/src/combobox/item/ComboboxItem.tsx

packages/react/src/combobox/positioner/ComboboxPositioner.tsx

packages/react/src/combobox/trigger/ComboboxTrigger.tsx

packages/react/src/combobox/root/ComboboxRootInternal.tsx

packages/react/src/combobox/clear/ComboboxClear.tsx

packages/react/src/combobox/item/ComboboxItem.tsx

packages/react/src/combobox/trigger/ComboboxTrigger.tsx

mnajdova

🎉 Well done James!

atomiks added component: combobox type: new feature Expand the scope of the product to solve a new problem. labels Jun 12, 2025

atomiks force-pushed the feat/Combobox branch from 9e7f96a to 727e1b1 Compare June 12, 2025 08:15

atomiks commented Jun 12, 2025

View reviewed changes

docs/src/app/(public)/(content)/react/components/combobox/demos/hero/css-modules/index.tsx Outdated Show resolved Hide resolved

atomiks force-pushed the feat/Combobox branch 4 times, most recently from 41a4d0f to 04f2b69 Compare June 12, 2025 12:57

atomiks force-pushed the feat/Combobox branch from 04f2b69 to 5336846 Compare June 12, 2025 23:12

This comment was marked as outdated.

Sign in to view

atomiks force-pushed the feat/Combobox branch 3 times, most recently from a851184 to 508c8de Compare June 17, 2025 02:23

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged. and removed PR: out-of-date The pull request has merge conflicts and can't be merged. labels Jun 17, 2025

atomiks force-pushed the feat/Combobox branch 6 times, most recently from 5de6915 to 27f8e3e Compare June 23, 2025 07:29

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 23, 2025

atomiks force-pushed the feat/Combobox branch from 27f8e3e to 24fbb03 Compare June 24, 2025 02:46

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 24, 2025

atomiks force-pushed the feat/Combobox branch 2 times, most recently from 586ccbc to ca828da Compare June 24, 2025 06:36

Merge branch 'master' into feat/Combobox

1e04631

michaldudak approved these changes Sep 2, 2025

View reviewed changes

oliviertassinari mentioned this pull request Sep 2, 2025

[number field] onValueChange not being called when input value is changed #579

Closed

atomiks added 11 commits September 3, 2025 14:21

refactor: cleanup

0d85046

fix: expose modal prop

861366c

refactor: use store for all state

41871dd

docs: update

0ff7ce3

docs: update

1985cb2

lint

e5c340f

docs: make modal prop generic

d507a87

feat: support enhanced filtering for external usage

38d426e

docs: popups-in-popups

37ab196

docs: add useFilter

7e26b89

Merge branch 'master' into feat/Combobox

74f4266

feat: support locale prop

399fa2a

colmtuite approved these changes Sep 3, 2025

View reviewed changes

LukasTy approved these changes Sep 3, 2025

View reviewed changes

atomiks added 4 commits September 3, 2025 22:16

fix: composition handling

c1af9ed

refactor: cleanup

7d0c4d9

docs: remove stale data.ts files

185723a

fix: remove unused .toLocaleLowerCase()

05b5f42

LukasTy reviewed Sep 3, 2025

View reviewed changes

packages/react/src/combobox/clear/ComboboxClear.tsx Outdated Show resolved Hide resolved

packages/react/src/combobox/item/ComboboxItem.tsx Outdated Show resolved Hide resolved

packages/react/src/combobox/trigger/ComboboxTrigger.tsx Outdated Show resolved Hide resolved

lint

e2ec3dd

mnajdova approved these changes Sep 3, 2025

View reviewed changes

atomiks added 4 commits September 4, 2025 00:04

fix: handle links

8b0a74b

Merge branch 'master' into feat/Combobox

a60832f

test: skip in browser

2d08bc9

fix: revert touch highlight check

88e36a7

oliviertassinari mentioned this pull request Sep 18, 2025

[examples] Revert examples deletion #2783

Merged


		expect(input).not.to.have.attribute('data-focused');

		fireEvent.focus(input);

Uh oh!

Conversation

atomiks commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Combobox

Autocomplete

FilterableMenu

Uh oh!

pkg-pr-new bot commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

netlify bot commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for base-ui ready!

Uh oh!

Uh oh!

michael-land commented Jun 12, 2025

Uh oh!

This comment was marked as outdated.

michaldudak left a comment

Choose a reason for hiding this comment

Uh oh!

mui-bot commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

LukasTy left a comment

Choose a reason for hiding this comment

Uh oh!

LukasTy Sep 2, 2025

Choose a reason for hiding this comment

Uh oh!

LukasTy Sep 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

LukasTy Sep 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mnajdova left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

14 participants

atomiks commented Jun 12, 2025 •

edited

Loading

pkg-pr-new bot commented Jun 12, 2025 •

edited

Loading

mui-bot commented Jun 12, 2025 •

edited

Loading

netlify bot commented Jun 12, 2025 •

edited

Loading

mui-bot commented Sep 3, 2025 •

edited

Loading