Skip to content

feat: add collapsible option groups to Select and Multiselect#4813

Draft
ernst-dev wants to merge 2 commits into
mainfrom
feat/select-collapsible-groups
Draft

feat: add collapsible option groups to Select and Multiselect#4813
ernst-dev wants to merge 2 commits into
mainfrom
feat/select-collapsible-groups

Conversation

@ernst-dev

Copy link
Copy Markdown
Member

Description

Adds an opt-in collapsibleGroups property to Select and Multiselect. When enabled, OptionGroup headers become expand/collapse disclosure controls and collapsing a group hides its child options from the dropdown list. Groups are expanded by default and the behaviour is fully backward compatible when the prop is omitted or false.

Implemented for AWSUI-61684.

⚠️ Ticket mismatch note: The Taskei ticket AWSUI-61684 currently resolves to an unrelated, already-resolved website-feedback item ("Merge tokens into one searchable list", P373009147). Per the task instructions, this PR implements the "Select collapsible groups" feature as described in the work request and flags the discrepancy for the reviewer to reconcile the ticket/spec.

What changed

  • New public prop collapsibleGroups?: boolean on BaseSelectProps (inherited by both Select and Multiselect).
  • Group headers render a caret disclosure affordance and expose aria-expanded (role="option" when collapsible).
  • Interaction: click / Enter / Space toggle a group; ArrowRight expands and ArrowLeft collapses the highlighted header (disclosure keyboard pattern).
  • Reuses the existing flatten → filter → render option-group pipeline. A small applyGroupCollapse utility marks parents as collapsible/expanded, removes children of collapsed groups, and regenerates test indexes so test-utils keep working for the visible subset.
  • Collapse state is tracked per top-level group index (stable across re-renders even when the consumer recreates the options array).
  • In Multiselect the group-level select-all checkbox is hidden on collapsible headers so the header is an unambiguous disclosure control; individual options and the top-level enableSelectAll row are unaffected.

Known follow-ups (not in this PR)

  • Virtual scroll (virtualScroll) is not yet optimized for collapse; the plain list path is fully supported.
  • Optional auto-expand of a collapsed group when a filter matches one of its children.
  • Public i18n aria-labels for the expand/collapse control (currently relies on aria-expanded + the group label).

How has this been tested?

  • New unit tests: src/select/__tests__/collapsible-groups.test.tsx (7) and src/multiselect/__tests__/collapsible-groups.test.tsx (4) covering default (backward-compatible) rendering, aria-expanded, click and keyboard toggling, child hiding, and that toggling does not alter selection.
  • Full existing Select / Multiselect / option suites pass (492 tests, no regressions).
  • eslint . → 0 errors. gulp quick-build → success.
  • Manual dev page added at pages/select/collapsible-groups.page.tsx.

Related links, issue #, if available: AWSUI-61684 (see mismatch note above)

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates. — JSDoc added for the new prop; public docs/Contentful article TBD.
  • Changes are backward-compatible if not indicated. — Yes, opt-in prop, default off.
  • Changes do not include unsupported browser features. — Yes.
  • Changes were manually tested for accessibility.aria-expanded on headers; keyboard (Enter/Space/Arrow) verified.

Security

  • If the code handles URLs... — N/A.

Testing

  • Changes are covered with new/existing unit tests? — Yes.
  • Changes are covered with new/existing integration tests? — Unit only in this PR; integ TBD.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Adds an opt-in `collapsibleGroups` property to Select and Multiselect.
When enabled, OptionGroup headers become expand/collapse disclosure
controls (aria-expanded, Enter/Space and Left/Right arrow support), and
collapsing a group hides its child options. Groups are expanded by
default and the behaviour is fully backward compatible when the prop is
omitted.
@codecov

codecov Bot commented Jul 23, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 96.22642% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.60%. Comparing base (f97729a) to head (27064c9).
⚠️ Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
src/multiselect/use-multiselect.tsx 90.47% 2 Missing ⚠️
src/select/internal.tsx 94.44% 1 Missing ⚠️
src/select/utils/use-select.ts 96.87% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4813      +/-   ##
==========================================
- Coverage   97.61%   97.60%   -0.01%     
==========================================
  Files         952      953       +1     
  Lines       30816    30916     +100     
  Branches    11318    11355      +37     
==========================================
+ Hits        30081    30177      +96     
- Misses        688      732      +44     
+ Partials       47        7      -40     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

1 participant