fix(Combobox): anchor the multi-select popup to the chips control box#125
Merged
Conversation
Base UI resolves the Combobox popup anchor as `inputGroupElement ?? inputElement`. Single-select wraps Base UI's `InputGroup` (`ComboboxControl`), so the popup anchored to the full-width control — but multi-select uses `Combobox.Chips`, which registers no `inputGroupElement`, so the anchor fell back to the `Input` floating at the end of the chip row. The popup then opened narrow and shifted right. `ComboboxChips` now publishes its DOM node through an internal context that `ComboboxContent` reads and passes as the Positioner's `anchor`, so the multi-select panel keeps a constant width = the control, left-aligned. Single-select is unchanged. No public TypeScript API change. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Warning Testing pausedMonthly snapshot limit reached. Update your plan for additional snapshots and to resume testing. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
In a
Combobox multiple, the floating popup anchored to the input (which floats at the end of the chip row) instead of the control box. Once several chips pushed the input toward the right edge, the listbox opened narrow and shifted right rather than keeping the control width.This anchors the multi-select popup to the chips control box, so it keeps a constant width = the control, left-aligned, regardless of where the input sits.
Why
Base UI resolves the Combobox popup anchor as
inputGroupElement ?? inputElement:InputGroup(ComboboxControl), which registersinputGroupElement→ popup anchors to the full-width control. ✅Combobox.Chips(ComboboxChips) as the bordered box, andChipsregisters noinputGroupElement→ the anchor fell back to theInputfloating after the chips. ❌How
ComboboxChipsnow publishes its DOM node through an internal React context (ComboboxAnchorContext) thatComboboxContentreads and passes as thePositioner's publicanchorprop. The chips box becomes the anchor, sowidth: var(--anchor-width)resolves to the control width.Single-select is unchanged: no chips box means no anchor override, so Base UI keeps anchoring to
ComboboxControl(InputGroup) as before. The consumer's forwardedrefonComboboxChipsis still honoured (merged with the internal anchor ref).No public TypeScript API change → patch.
Verification
typecheck+lint+format:check+build(incl.verify:dist-types) green.test— 177/177 (added a regression test asserting the consumer ref still resolves to the chips box).defaultOpen): with 2 chips on one line the input floats right (x=166, width=301) yet the popup matches the control box exactly (x=16, width=460). NewMultipleWidePanelstory added for the Chromatic baseline.Surfaced in Alexandria's
AddUsers/AddSkillsmulti-select pickers.🤖 Generated with Claude Code