Skip to content

SearchableChipSelect: Add grouped items support - #80989

Draft
mirka wants to merge 2 commits into
trunkfrom
update-ui-searchable-chip-select
Draft

SearchableChipSelect: Add grouped items support#80989
mirka wants to merge 2 commits into
trunkfrom
update-ui-searchable-chip-select

Conversation

@mirka

@mirka mirka commented Jul 30, 2026

Copy link
Copy Markdown
Member

What?

Enhances the SearchableChipSelect primitive with grouped items support.

Why?

Grouped options are a common combobox pattern.

How?

  • Export Group, GroupLabel, and Collection subcomponents from SearchableChipSelect.
  • Fix the default collection renderer so custom children are passed directly to Combobox.Collection (required for grouped rendering).
  • Add ItemGroup typing for grouped items.
  • Add Grouped story and unit tests for grouped and creatable behavior.

Testing Instructions

  1. Run Storybook and open Design System / Components / Form / Primitives / SearchableChipSelect.
  2. Check the Grouped story: open the popup and confirm items appear under group labels.
  3. Check the Creatable story still works.

Screenshots

Grouped items

@mirka mirka self-assigned this Jul 30, 2026
@github-actions github-actions Bot added the [Package] UI /packages/ui label Jul 30, 2026
@mirka mirka added the [Type] Enhancement A suggestion for improvement. label Jul 30, 2026
@github-actions

Copy link
Copy Markdown

Size Change: 0 B

Total Size: 7.76 MB

compressed-size-action

Comment on lines 8 to +11
Item.displayName = 'SearchableChipSelect.Item';
ChipWithRemove.displayName = 'SearchableChipSelect.ChipWithRemove';
Group.displayName = 'SearchableChipSelect.Group';
GroupLabel.displayName = 'SearchableChipSelect.GroupLabel';

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Why aren't we setting a display name for Collection?

Short answer: I realized we have some systemic problems with the way we assign new display names on re-exports. This is especially noticeable for the Collection subcomponent, but already effects other subcomponents as well.

Longer answer

When higher-level components re-export combobox subcomponents (Item, Group, Collection, etc.) and assign displayName in each layer's index file, two issues stack up:

1. TypeScript vs runtime
forwardRef subcomponents (Item, Group, …) allow displayName assignment. Plain functions like Collection don't — TypeScript errors unless you suppress or cast. forwardRef on Collection doesn't work because base-ui's Collection doesn't take a ref.

2. Shared singleton references
Re-exporting the same imported component and setting displayName in both SearchableChipSelect and SearchableChipSelectControl mutates one function object — only the last assignment wins. That's already true for Item, Group, etc., not just Collection.

Distinct names per layer requires a new component reference each time — a wrapper function or a dedicated file (like SelectControl.Item, which wraps rather than re-exports).

Decision: Skip Collection.displayName for now; treat the singleton / multi-layer naming problem as systemic, not worth solving piecemeal in this PR.

@github-actions

Copy link
Copy Markdown

Flaky tests detected in ff0f62f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30567200318
📝 Reported issues:

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

Labels

[Package] UI /packages/ui [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant