SearchableChipSelect: Add grouped items support - #80989
Conversation
|
Size Change: 0 B Total Size: 7.76 MB |
| Item.displayName = 'SearchableChipSelect.Item'; | ||
| ChipWithRemove.displayName = 'SearchableChipSelect.ChipWithRemove'; | ||
| Group.displayName = 'SearchableChipSelect.Group'; | ||
| GroupLabel.displayName = 'SearchableChipSelect.GroupLabel'; |
There was a problem hiding this comment.
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.
|
Flaky tests detected in ff0f62f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30567200318
|
What?
Enhances the
SearchableChipSelectprimitive with grouped items support.Why?
Grouped options are a common combobox pattern.
How?
Group,GroupLabel, andCollectionsubcomponents fromSearchableChipSelect.childrenare passed directly toCombobox.Collection(required for grouped rendering).ItemGrouptyping for groupeditems.Testing Instructions
Screenshots