Skip to content

Conversation

chuganzy
Copy link
Contributor

@chuganzy chuganzy commented Oct 2, 2025

This PR just moves the CompositeList from the Root element to the List to make Input element work with Composites, such as Toolbar.

CodeSandbox: https://codesandbox.io/p/sandbox/quizzical-swanson-7q3yqh

It can move the focus from the input successfully because the keyboard event is handled by the CompositeRoot, however it cannot move back with arrow keys because the ComboboxInput is unavailable there but registered to the context in the ComboboxRoot(Internal).


As a side note, I am not sure if it is intended to enable focus roving on the input elements (or focusable elements in general) that is not rendered as CompositeItem. Somewhat relates to #2702.

Copy link

pkg-pr-new bot commented Oct 2, 2025

vite-css-base-ui-example

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

commit: 046f911

Copy link

netlify bot commented Oct 2, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 046f911
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/68e3f30d2f488a00084bdce6
😎 Deploy Preview https://deploy-preview-2883--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.

@zannager zannager added scope: autocomplete Changes related to the autocomplete. This includes ComboBox. component: Combobox The React component. labels Oct 2, 2025
@mui-bot
Copy link

mui-bot commented Oct 3, 2025

Bundle size report

Bundle Parsed size Gzip size
@base-ui-components/react 🔺+123B(+0.03%) 🔺+37B(+0.03%)

Details of bundle changes

@atomiks
Copy link
Contributor

atomiks commented Oct 3, 2025

Works with the PR release preview: https://codesandbox.io/p/sandbox/2883-forked-38q7wf
But this breaks React 18 tests

@chuganzy chuganzy force-pushed the autocomplete-composite branch from f4c8d55 to cc9bf54 Compare October 4, 2025 05:05
@chuganzy chuganzy force-pushed the autocomplete-composite branch from cc9bf54 to 046f911 Compare October 6, 2025 16:49
labelsRef.current = [];
}
};
}, [labelsRef]);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes in CompoboxList revealed an issue where refs are not cleaned up on unmount, keeps holding all references to the elements. It caused the test fail in React 18 Strict Mode, because listRef is not empty on the second+ time on open and waitForListPopulated in useListNavigation assumes it is ready to navigate as soon as it opens.

This was not an issue in React 19 Strict Mode, since IndexGuessBehavior.GuessFromOrder behaved more accurately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Combobox The React component. scope: autocomplete Changes related to the autocomplete. This includes ComboBox.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants