feat(combobox): add `selectAll` toggle property #11721

Elijbet · 2025-03-08T01:20:24Z

Related Issue: #2311

Summary

Provides a Select All checkbox in the calcite-combobox by default for selection-mode="multiple" as a convenient shortcut for users to quickly select or deselect all items in the list. The indeterminate state for this checkbox is a visual and programmatic state that indicates a checkbox is neither fully checked nor unchecked. It represents a "partial selection" in scenario where a checkbox is associated with a group of child checkboxes, and some (but not all) of the child checkboxes are selected.

… only that says All selected:

… persist select from aquiring the checkbox Select all

github-actions · 2025-03-18T02:02:25Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

github-actions · 2025-03-27T02:02:55Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

github-actions · 2025-04-12T02:02:30Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

packages/calcite-components/src/components/combobox/combobox.tsx

…s Select All option

Elijbet · 2025-05-11T18:23:56Z

This is working on my end. Maybe @driskull can test also

I don't see a chip when all items are selected either.

It was showing on my end because I didn't have the placeholder set. I made some changes to show it.
newCompactBreakpoint is calculated with getTextWidth, which accounts for the placeholder.

…for the a11y test

packages/calcite-components/src/components/combobox/combobox.tsx

…ding to array

ashetland · 2025-05-12T22:55:26Z

LGTM

jcfranco

Awesome job, @Elijbet! Had a few follow-up review comments, but this looks great!

packages/calcite-components/src/components/combobox/combobox.e2e.ts

packages/calcite-components/src/components/combobox/combobox.stories.ts

jcfranco · 2025-05-13T03:28:26Z

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -1090,6 +1177,10 @@ export class Combobox
    connectFloatingUI(this);
  }

+  private setSelectAllComboboxItemReferenceEl(el: HTMLCalciteComboboxItemElement): void {
+    this.selectAllComboboxItemReferenceEl = el;


Could you look into using a Ref instead? It'd help simplify some code.

packages/calcite-components/src/components/combobox/combobox.e2e.ts

jcfranco · 2025-05-13T03:37:40Z

packages/calcite-components/src/components/combobox/combobox.e2e.ts

+
+    it("should toggle indeterminate state to `All Selected` when list items are toggled with a click", async () => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      await testToggleListItems(page, async ([listItem, _combobox]) => {


Let's not disable this rule. You don't need to specify _combobox if it's not being used:

await testToggleAllItems(page, async ([selectAll]) => { /* ... */ });

Applies to similar unused var lines.

I'm passing both because I'm using either/or, right? I have 2 it blocks that call testToggleListItems, to test the click I need the listItem, to test the Enter key, I need the combobox.

jcfranco · 2025-05-13T03:38:57Z

packages/calcite-components/src/components/combobox/combobox.e2e.ts

+    });
+
+    it("should toggle indeterminate state to `All Selected` when list items are toggled with a keydown `Enter`", async () => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars


Let's not disable this rule. You don't need to specify _listItem if it's not being used.

await testToggleAllItems(page, async ([, combobox]) => { /* ... */ });

Applies to similar unused var lines.

jcfranco · 2025-05-13T04:47:12Z

packages/calcite-components/src/components/combobox/combobox.tsx

+    const containerRect = listContainer.getBoundingClientRect();
+
+    if (itemRect.top < containerRect.top + stickyHeight) {
+      listContainer.scrollTop -= containerRect.top + stickyHeight - itemRect.top;


Based on the pros that @Elijbet shared, I think it's fine to keep as is. There might be some cases where the z-index could cause some issues, but we can wait until we get feedback.

Ideally, it should be moved out because it doesn't need to be applied as sticky since it never scrolls at all.

Wouldn't it scroll when maxItems is set (see example)?

**Related Issue:** #2311 ## Summary Provides a `Select All` checkbox in the `calcite-combobox` by default for `selection-mode="multiple"` as a convenient shortcut for users to quickly select or deselect all items in the list. The `indeterminate` state for this checkbox is a visual and programmatic state that indicates a checkbox is neither fully checked nor unchecked. It represents a "partial selection" in scenario where a checkbox is associated with a group of child checkboxes, and some (but not all) of the child checkboxes are selected. --------- Co-authored-by: Matt Driscoll <[email protected]>

* origin/dev: (277 commits) docs(tokens): consistency pass for new component descriptions (#12148) build(preset): use valid TS module resolution (#12151) docs: update list of contributors (#12134) chore: drop obsolete transforms (#12136) chore: release main (#11890) (#12147) build(deps): bump @arcgis/lumina, typescript, vite, vitest (#12137) chore(preset): fix JSON import in build config (#12142) docs(panel, action): update `text-color-pressed` token descriptions (#12140) chore: release next fix(input-time-picker): invert text color on Windows when each masked input is focused (#12130) chore: release next refactor(sematic-tokens): update `--calcite-corner-radius-default` to reference correct token (#12131) feat(semantic-tokens): add `--calcite-color-text-highlight` tokens (#12068) chore: release next feat(combobox): add `selectAll` toggle property (#11721) chore: release next fix(sort-handle): allow move and reorder events to be cancelled (#12095) chore: release next feat: added spike data, heart chart, and progress bar icons (#12127) feat(text-area): Add design tokens for corner radius, shadow, footer background color (#12124) ...

**Related Issue:** #11721, #2311 ## Summary Refactor the `combobox` `Select All` toggle logic.

feat(combobox): add select-all toggle

e57a387

Elijbet marked this pull request as draft March 8, 2025 01:20

github-actions bot assigned Elijbet Mar 8, 2025

github-actions bot added the enhancement Issues tied to a new feature or request. label Mar 8, 2025

Elijbet added 3 commits March 7, 2025 23:53

set to

86806f9

logic for all items to be selected/deselected when selectAll is toggled

6153643

when this.selectAllChecked hide all the chips and instead display one…

e0bd2e1

… only that says All selected:

Elijbet changed the title ~~feat(combobox): add select-all toggle~~ feat(combobox): add selectAll toggle property Mar 8, 2025

Elijbet added 2 commits March 8, 2025 22:58

rewrite css in tailwind and calcite tokens

8fd8f6e

add this.selectAllKeyDownHandler and prevent single select and single…

63c5ebe

… persist select from aquiring the checkbox Select all

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Mar 18, 2025

Elijbet removed the Stale Issues or pull requests that have not had recent activity. label Mar 19, 2025

WIP: logic for ArrowDown

dcf1b0f

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Mar 27, 2025

merge dev

81d7f65

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Apr 5, 2025

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Apr 12, 2025

Elijbet added 2 commits April 16, 2025 16:12

cleanup

d750d43

WIP: arrowDown logic

6b870d3

driskull reviewed Apr 17, 2025

View reviewed changes

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Apr 18, 2025

Elijbet added 6 commits April 19, 2025 21:29

WIP: sub custom input checkbox element with a special combobox item a…

705e1e7

…s Select All option

WIP: cleanup

c585981

this.renderAllSelectedIndicatorChip when this.selectAllEnabled

c8ef92c

merge dev

c04dc1f

make id more specific

e6f1c4b

only toggle when select all is toggled

b72225a

Elijbet added 3 commits May 9, 2025 16:50

add allSelected class for the chip to query in tests and small refactors

18a59b3

renderAllSelectedIndicatorChip to use compactSelectionDisplay

efa765b

cleanups and refactors

418b88e

Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 11, 2025

Elijbet added 3 commits May 11, 2025 12:16

cleanup

0586822

cleanup

1b02ded

delay render() until the strings are ready to make strings available …

eab03c1

…for the a11y test

driskull reviewed May 12, 2025

View reviewed changes

packages/calcite-components/src/components/combobox/combobox.tsx Outdated Show resolved Hide resolved

Elijbet added 4 commits May 12, 2025 13:05

cleanup to pass accessiblity tests

a6af93a

adjust test to pass

b3e4f95

refactor - make sure selectAllComboboxItem is not undefined before ad…

4a742e9

…ding to array

refactor continued

c0301c1

Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 12, 2025

remove blocking for messages

2308e6a

Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 12, 2025

Elijbet merged commit 7dab04f into dev May 13, 2025
14 checks passed

Elijbet deleted the elijbet/2311-select-all-prop-combobox branch May 13, 2025 00:03

github-actions bot added this to the 2025-05-13 - 3.2.0 May Main Release milestone May 13, 2025

jcfranco reviewed May 13, 2025

View reviewed changes

calcite-admin mentioned this pull request May 14, 2025

chore: release main #11890

Merged

Elijbet mentioned this pull request May 14, 2025

refactor(combobox): Select All toggle logic #12150

Merged

Elijbet mentioned this pull request May 23, 2025

feat(combobox): add --calcite-combobox-divider-color #12223

Merged

Elijbet added a commit that referenced this pull request May 27, 2025

refactor(combobox): Select All toggle logic (#12150)

b07d396

**Related Issue:** #11721, #2311 ## Summary Refactor the `combobox` `Select All` toggle logic.

feat(combobox): add selectAll toggle property #11721

feat(combobox): add selectAll toggle property #11721

Uh oh!

Conversation

Elijbet commented Mar 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

github-actions bot commented Mar 18, 2025

Uh oh!

github-actions bot commented Mar 27, 2025

Uh oh!

github-actions bot commented Apr 12, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Elijbet commented May 11, 2025

Uh oh!

Uh oh!

ashetland commented May 12, 2025

Uh oh!

Uh oh!

jcfranco left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jcfranco May 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jcfranco May 13, 2025

Choose a reason for hiding this comment

Uh oh!

Elijbet May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcfranco May 13, 2025

Choose a reason for hiding this comment

Uh oh!

jcfranco May 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

feat(combobox): add `selectAll` toggle property #11721

feat(combobox): add `selectAll` toggle property #11721

Elijbet commented Mar 8, 2025 •

edited

Loading

Elijbet May 20, 2025 •

edited

Loading