Skip to content

Conversation

@atomiks
Copy link
Contributor

@atomiks atomiks commented Dec 21, 2025

This is an attempt to support the cmdk library's composition style, without items specified on Root, and without needing to perform filtering externally:

<Combobox.Root>
  <Combobox.Input />
  <Combobox.Portal>
    <Combobox.Positioner>
      <Combobox.Popup>
        <Combobox.List>
          {fruits.map((item) => (
            <Combobox.Item key={item} value={item}>
              <Combobox.ItemIndicator>
                <CheckIcon />
              </Combobox.ItemIndicator>
              <div>{item}</div>
            </Combobox.Item>
          ))}
        </Combobox.List>
      </Combobox.Popup>
    </Combobox.Positioner>
  </Combobox.Portal>
</Combobox.Root>

Right now, Autocomplete supports this well, but you need to filter items externally yourself (via Autocomplete.useFilter). Combobox has limited/partial support and does not work fully.

Implementation

Each item returns null internally when it's not rendered. Groups use hidden attribute to prevent unmounting the children so their effects still run.

Pros

  • You can use this in a server component without re-exporting a client component as there's no function-as-child pattern
  • There's no need to explicitly type the item type in the function child (since TS infers it from the external array, naturally)
  • More flexible item rendering/ordering

Cons

  • Extra code to handle
  • As with Select, Combobox needs to force-mount the popup when interacted with because it needs to register the items/labels since the rest of the component tree doesn't have access to items
  • Users must use objects for each item for the label to be known ahead of time (before force-mounting)
  • Virtualization requires items. Switching from no virtualization to virtualization already works naturally with the current/default API

@atomiks atomiks added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. component: autocomplete Changes related to the autocomplete component. component: combobox Changes related to the combobox component. labels Dec 21, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 21, 2025

  • vite-css-base-ui-example

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

commit: 9204b7b

@mui-bot
Copy link

mui-bot commented Dec 21, 2025

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 🔺+2.13KB(+0.52%) 🔺+774B(+0.59%)

Details of bundle changes


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

@netlify
Copy link

netlify bot commented Dec 21, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 9204b7b
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6948a039fbcd510008e36145
😎 Deploy Preview https://deploy-preview-3594--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@atomiks atomiks force-pushed the fix/autocomplete-external-mapping branch 4 times, most recently from cc15d1e to 3d51da5 Compare December 22, 2025 01:32
@atomiks atomiks force-pushed the fix/autocomplete-external-mapping branch from 3d51da5 to 9204b7b Compare December 22, 2025 01:34
@KingSora
Copy link

@atomiks do you think this would also cover the usecase described here: #3559 ?

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

Labels

component: autocomplete Changes related to the autocomplete component. component: combobox Changes related to the combobox component. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants