Skip to content

combo_box: Add ComboBox component#2319

Merged
huacnlee merged 10 commits into
longbridge:mainfrom
regexident:combo-box
May 14, 2026
Merged

combo_box: Add ComboBox component#2319
huacnlee merged 10 commits into
longbridge:mainfrom
regexident:combo-box

Conversation

@regexident

Copy link
Copy Markdown
Contributor

Description

Adds two new components, ComboBox and MultiComboBox, for single- and multi-selection from a searchable list of items, with a free-form text input as the trigger. Both components support custom item rendering via a new item_renderer hook on the underlying searchable list adapter.

To avoid duplicating the substantial dropdown/search/keyboard-navigation logic that already lived inside Select, the searchable-list machinery has been extracted into a new shared searchable_list module which now backs Select, ComboBox, and MultiComboBox:

  • searchable_list::adapter::SearchableListAdapter — the shared dropdown/search/keyboard-navigation engine, with a new item_renderer hook so consumers can fully customize how each item is rendered.
  • searchable_list::delegate::{SearchableListDelegate, SearchableListItem} — the trait surface that data sources implement.
  • searchable_list::item::SearchableListItemEl — the default item element.
  • searchable_list::vec::{SearchableVec, SearchableGroup} — flat and grouped in-memory data sources.

Select was rewritten on top of this shared module, dropping ~615 lines of now-duplicated code while preserving its public API.

A ComboBoxStory was added to the gallery with 10 demo sections exercising both components (sizes, disabled state, custom rendering, grouped items, etc.), and full English and Simplified Chinese documentation pages were added at docs/docs/components/combo-box.md and docs/zh-CN/docs/components/combo-box.md (⚠️ obligatory: needs proof-reading ❗ ). The existing select.md pages were updated to cross-link to the new combo-box docs. New i18n strings were added to crates/ui/locales/ui.yml.

Screenshot

Before After
n/a image

Break Changes

n/a

How to Test

  1. Run the story gallery: cargo run.
  2. Navigate to the Combo Box story in the gallery sidebar and walk through the 10 demo sections, verifying:
    • Typing filters the dropdown items in real time.
    • Keyboard navigation (Up/Down/Enter/Escape) works for both ComboBox and MultiComboBox.
    • MultiComboBox supports multi-selection and shows selected items as removable chips.
    • Custom-rendered items (via item_renderer) display correctly.
    • Grouped items render with their group headers.
    • Disabled and sized variants behave as expected.
  3. Navigate to the Select story and confirm there are no visual or behavioral regressions after the rewrite onto searchable_list.
  4. Open docs/docs/components/combo-box.md and docs/zh-CN/docs/components/combo-box.md and verify both render correctly and the cross-links from select.md resolve.

Checklist

  • I have read the CONTRIBUTING document and followed the guidelines.
  • Reviewed the changes in this PR and confirmed AI generated code (If any) is accurate.
  • Passed cargo run for story tests related to the changes.
  • Tested macOS, Windows and Linux platforms performance (if the change is platform-specific)

@regexident regexident changed the title Combo box combo_box: Add ComboBox and MultiComboBox components Apr 29, 2026
@regexident regexident force-pushed the combo-box branch 2 times, most recently from bf0275d to 399318a Compare April 29, 2026 11:16
@huacnlee

huacnlee commented May 3, 2026

Copy link
Copy Markdown
Member
image

Please use this icon.

@huacnlee

huacnlee commented May 3, 2026

Copy link
Copy Markdown
Member

MultiComboBox is not a good name.

If we add ComboBox, we need do like Shadcn to have multiple option for multiple case.

huacnlee pushed a commit that referenced this pull request May 13, 2026
<!-- Closes #[issue number] -->

## Description

I'm finding that Claude keeps falling into the same trap when
implementing custom components (such as
#2319):

> thread 'main' (…) panicked at …:
> cannot update … while it is already being updated

The proposed skill changes aim to address these weaknesses.

## Screenshot

n/a

## Break Changes

n/a

## How to Test

n/a

## Checklist

- [x] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document and
followed the guidelines.
- [x] Reviewed the changes in this PR and confirmed AI generated code
(If any) is accurate.
- [x] Passed `cargo run` for story tests related to the changes.
- [x] Tested macOS, Windows and Linux platforms performance (if the
change is platform-specific)
@regexident

Copy link
Copy Markdown
Contributor Author

@huacnlee Both your points should be resolved now. 👍

@huacnlee huacnlee changed the title combo_box: Add ComboBox and MultiComboBox components combo_box: Add ComboBox component May 14, 2026
huacnlee and others added 6 commits May 14, 2026 14:08
…lect

- Rename module `combo_box` → `combobox` and all types
  (`ComboBox`→`Combobox`, `ComboBoxState`→`ComboboxState`, etc.)
- Replace `ComboBoxMode::Single/Multi` enum with a `multiple(bool)` prop,
  matching Shadcn Combobox API (`multiple` attribute)
- Remove `close_on_select`: behavior is now derived from `multiple`
  (single→close on select, multiple→stay open), matching Shadcn semantics

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…inks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…or unified multiple(bool)

- Add Select vs Combobox feature comparison table
- Highlight multi-select as the key differentiator from Select
- Fix import section: remove deprecated MultiComboBox/MultiComboBoxState types
- Fix all code examples to use current API (ComboboxState, multiple(true), vec![] indices)
- Fix ComboboxTriggerCtx usage: ctx.selection instead of ctx.selected_item
- Merge single/multi-select sections into unified usage examples

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Rename trigger_icon() → icon() to match Select's convention
- Add selected_value() → Option<Value> convenience for single-select
- Add window param to set_selected_indices() to match set_selected_index() in Select
- Restrict handle_item_select to pub(crate) — internal/test use only

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ger closures

Callers no longer need .into_any_element() — the conversion happens inside
the builder method.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
"El" abbreviation is not allowed by project convention.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@huacnlee huacnlee merged commit f2ae9cb into longbridge:main May 14, 2026
6 of 7 checks passed
@huacnlee

Copy link
Copy Markdown
Member

Thank you.

AzureZee pushed a commit to AzureZee/gpui-component that referenced this pull request May 16, 2026
…e#2362)

<!-- Closes #[issue number] -->

## Description

I'm finding that Claude keeps falling into the same trap when
implementing custom components (such as
longbridge#2319):

> thread 'main' (…) panicked at …:
> cannot update … while it is already being updated

The proposed skill changes aim to address these weaknesses.

## Screenshot

n/a

## Break Changes

n/a

## How to Test

n/a

## Checklist

- [x] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document and
followed the guidelines.
- [x] Reviewed the changes in this PR and confirmed AI generated code
(If any) is accurate.
- [x] Passed `cargo run` for story tests related to the changes.
- [x] Tested macOS, Windows and Linux platforms performance (if the
change is platform-specific)
AzureZee pushed a commit to AzureZee/gpui-component that referenced this pull request May 16, 2026
## Description

Adds two new components, `ComboBox` and `MultiComboBox`, for single- and
multi-selection from a searchable list of items, with a free-form text
input as the trigger. Both components support custom item rendering via
a new `item_renderer` hook on the underlying searchable list adapter.

To avoid duplicating the substantial dropdown/search/keyboard-navigation
logic that already lived inside `Select`, the searchable-list machinery
has been extracted into a new shared `searchable_list` module which now
backs `Select`, `ComboBox`, and `MultiComboBox`:

- `searchable_list::adapter::SearchableListAdapter` — the shared
dropdown/search/keyboard-navigation engine, with a new `item_renderer`
hook so consumers can fully customize how each item is rendered.
- `searchable_list::delegate::{SearchableListDelegate,
SearchableListItem}` — the trait surface that data sources implement.
- `searchable_list::item::SearchableListItemEl` — the default item
element.
- `searchable_list::vec::{SearchableVec, SearchableGroup}` — flat and
grouped in-memory data sources.

`Select` was rewritten on top of this shared module, dropping ~615 lines
of now-duplicated code while preserving its public API.

A `ComboBoxStory` was added to the gallery with 10 demo sections
exercising both components (sizes, disabled state, custom rendering,
grouped items, etc.), and full English and Simplified Chinese
documentation pages were added at `docs/docs/components/combo-box.md`
and `docs/zh-CN/docs/components/combo-box.md` (⚠️ obligatory: needs
proof-reading ❗ ). The existing `select.md` pages were updated to
cross-link to the new combo-box docs. New i18n strings were added to
`crates/ui/locales/ui.yml`.

## Screenshot

| Before                       | After                       |
| ---------------------------- | --------------------------- |
| n/a | <img width="357" height="965" alt="image"
src="https://github.com/user-attachments/assets/d4c2cb6f-bb93-43bd-8179-807114c5825e"
/> |

## Break Changes

n/a

## How to Test

1. Run the story gallery: `cargo run`.
2. Navigate to the **Combo Box** story in the gallery sidebar and walk
through the 10 demo sections, verifying:
   - Typing filters the dropdown items in real time.
- Keyboard navigation (Up/Down/Enter/Escape) works for both `ComboBox`
and `MultiComboBox`.
- `MultiComboBox` supports multi-selection and shows selected items as
removable chips.
   - Custom-rendered items (via `item_renderer`) display correctly.
   - Grouped items render with their group headers.
   - Disabled and sized variants behave as expected.
3. Navigate to the **Select** story and confirm there are no visual or
behavioral regressions after the rewrite onto `searchable_list`.
4. Open `docs/docs/components/combo-box.md` and
`docs/zh-CN/docs/components/combo-box.md` and verify both render
correctly and the cross-links from `select.md` resolve.

## Checklist

- [x] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document and
followed the guidelines.
- [x] Reviewed the changes in this PR and confirmed AI generated code
(If any) is accurate.
- [x] Passed `cargo run` for story tests related to the changes.
- [x] Tested macOS, Windows and Linux platforms performance (if the
change is platform-specific)

---------

Co-authored-by: Jason Lee <huacnlee@gmail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants