Skip to content

Conversation

@ByronDWall
Copy link
Contributor

@ByronDWall ByronDWall commented Oct 28, 2025

Refactored ComboBox to use a unified context-based architecture for better state management and added several missing features that were causing usability issues.

Why this change was necessary:

The previous ComboBox implementation had fragmented state management that made it difficult to coordinate behavior between the input, dropdown, and selection components. This caused issues with:

  • Keyboard navigation not working reliably
  • Multi-select tags not syncing properly with selections
  • Async data loading being difficult to implement
  • Missing critical features like custom option creation and advanced filtering
  • Inconsistent behavior between single and multi-select modes

The new architecture consolidates state management into a single context pattern, enabling proper coordination between all component parts and making it straightforward to add features like async loading, custom filters, and creatable options. This brings ComboBox up to par with other production-grade autocomplete components and unblocks several user-facing feature requests.

@ByronDWall ByronDWall self-assigned this Oct 28, 2025
@changeset-bot
Copy link

changeset-bot bot commented Oct 28, 2025

🦋 Changeset detected

Latest commit: 4ec2402

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@commercetools/nimbus Major
@commercetools/nimbus-i18n Major
@commercetools/nimbus-tokens Major
@commercetools/nimbus-icons Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Oct 28, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
nimbus-documentation Ready Ready Preview, Comment Jan 14, 2026 4:09pm
nimbus-storybook Ready Ready Preview, Comment Jan 14, 2026 4:09pm

@ByronDWall ByronDWall force-pushed the CRAFT-1822-combobox-refactor branch from 7b98059 to 3149372 Compare October 28, 2025 20:23
@ByronDWall ByronDWall force-pushed the CRAFT-1822-combobox-refactor branch from 3149372 to e1b53ff Compare October 29, 2025 16:31
@ByronDWall ByronDWall force-pushed the CRAFT-1822-combobox-refactor branch from e1b53ff to c2b0f32 Compare October 29, 2025 16:53
@ByronDWall ByronDWall force-pushed the CRAFT-1822-combobox-refactor branch from c2b0f32 to fa42fd3 Compare October 29, 2025 21:44
@ByronDWall ByronDWall force-pushed the CRAFT-1822-combobox-refactor branch from fa42fd3 to b84163a Compare October 29, 2025 21:48
@ByronDWall ByronDWall force-pushed the CRAFT-1822-combobox-refactor branch from 6dd59e4 to 69c6c57 Compare November 21, 2025 23:02
@ByronDWall ByronDWall force-pushed the CRAFT-1822-combobox-refactor branch from 69c6c57 to 33b066e Compare November 21, 2025 23:27
</Stack>
</ComboBox.Option>
)}
<ComboBox.Root size="md" items={options} placeholder="Search...">
Copy link
Collaborator

Choose a reason for hiding this comment

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

Note that 0b1a626 added slight changes so that the code examples would render appropriately.

Prior to the update, all Visual options displayed as Error: cannot be rendered outside a collection.
And the Async example displayed as ReferenceError: useAsyncList is not defined

Copy link
Collaborator

@valoriecarli valoriecarli left a comment

Choose a reason for hiding this comment

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

Added a teeny tiny commit, as well as a note for myself to handle i18n (first time we've updated existing keys/values).
Crazy amazing work, and the new Storybook tests made me smile.
A++

@jaikamat jaikamat force-pushed the CRAFT-1822-combobox-refactor branch 2 times, most recently from f4ada83 to 0b1a626 Compare January 14, 2026 15:54
ByronDWall and others added 13 commits January 14, 2026 10:55
…nd collection are now being set in a usable way
…ct is working with tag group, filtering is working - basic functionality using single context achieved
… are looking good, still needs testing, etc tho
…ectly and add a few basic tests, add a set of custom filters for use with combobox and test them, update comments and documentation, update testing plan, update readme, etc
… child components in trigger do not receive external values
* chore(nimbus): combobox - layout structure tests

* chore(nimbus): combobox - multi-select tag display tests

* chore(nimbus): combobox - input field behavior tests

* chore(nimbus): combobox - button visibility and behavior tests

* chore(nimbus): combobox - focus behavior tests

* chore(nimbus): notes

* chore(nimbus): combobox - keyboard navigation tests

* chore(nimbus): combobox - menu opening and closing tests

* chore(nimbus): combobox - option selection tests

* chore(nimbus): combobox - clear button functionality tests

* chore(nimbus): combobox - multi and single select behavior tests

* chore(nimbus): combobox - selection persistence tests

* chore(nimbus): combobox - basic text filtering tests

* chore(nimbus): combobox - custom filter tests

* chore(nimbus): combobox - empty state handling tests

* chore(nimbus): combobox - basic custom option creation tests

* chore(nimbus): combobox - single select creation tests

* chore(nimbus): combobox - a11y keyboard tests

* chore(nimbus): combobox - a11y relationship tests

* chore(nimbus): combobox - visual variant tests

* chore(nimbus): combobox - state visual tests

* chore(docs): remove temporary testing plan file

* chore(combobox): revisions

* feat(combobox option): options in listbox don't focus on hover

* chore(combobox): add test for modal integration

* chore(dialog): squelch button context for children

* Revert "chore(dialog): squelch button context for children"

This reverts commit af7f799.

* chore(combobox): edit tests after rebase

* chore(combobox): await in test, fix

---------

Co-authored-by: Byron Wall <[email protected]>
Copy link
Collaborator

@misama-ct misama-ct left a comment

Choose a reason for hiding this comment

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

I trust you

return (
<Stack direction="column" gap="400">
<ComposedComboBox aria-label="First combobox" items={simpleOptions} />
<ComposedComboBox
Copy link
Contributor

@tylermorrisford tylermorrisford Jan 14, 2026

Choose a reason for hiding this comment

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

This variant:solid story fails for me in the Storybook preview but not on the branch... approving anywayz

Copy link
Contributor

Choose a reason for hiding this comment

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

It's a light mode/dark mode thing. Fails for me on dark mode too, good catch

@jaikamat jaikamat merged commit dcf5f6f into main Jan 15, 2026
13 checks passed
@jaikamat jaikamat deleted the CRAFT-1822-combobox-refactor branch January 15, 2026 16:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants