Skip to content

Enhancement: Select all for combobox #2311

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
jgibson02 opened this issue Jun 11, 2021 · 17 comments
Closed

Enhancement: Select all for combobox #2311

jgibson02 opened this issue Jun 11, 2021 · 17 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. c-combobox Issues that pertain to the calcite-combobox and related components design Issues that need design consultation prior to, or during, development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Milestone
2025-05-13 - 3.2....

Comments

@jgibson02
Copy link
Contributor

jgibson02 commented Jun 11, 2021 •
edited by ashetland
Loading

Description

Provide a way to include a "select all/none" button for a pick-list Combobox

Acceptance Criteria

Final designs in this Figma file. These designs also take into account updated selection icons from issue #10580.

Relevant Info

Which Component

pick-list Combobox

Example Use Case

In ArcGIS Velocity we have a page with a data grid for items with a dropdown filter for item status (currently a calcite-react MultiSelect):
image
image
image

We decided to add a "select all/none" button to the list since it's common for a user to want to quickly filter down to a single/few status types but then want to go back to seeing everything.

monday.com sync: #5220192358
@jgibson02 jgibson02 added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jun 11, 2021
@macandcheese
Copy link
Contributor

macandcheese commented Jun 11, 2021 •
edited
Loading

Super valid. Some thoughts:

  • This should be an opt-in functionality.
  • This has also come up about the combobox as well, so any solution should be designed with both of these components in mind (dropdown multi-select too ?).
    • For combobox, this might require a new prop (also valid without the select-all use case), max-displayed-chips (?), any chips after which are appended to a “+n” chip.
    • Invokes the follow up question, “can you click the "+n" chip to show those items”

@macandcheese macandcheese added the design Issues that need design consultation prior to, or during, development. label Jun 11, 2021
@jcfranco jcfranco removed the needs triage Planning workflow - pending design/dev review. label Jul 29, 2021
@jcfranco jcfranco added this to the Backlog milestone Jul 29, 2021
@bstifle

This comment has been minimized.

Sign in to view
@jgibson02 jgibson02 changed the title Enhancement: Select all/none for pick-list Enhancement: Select all/none for pick-list/dropdown/combobox Sep 23, 2021
@macandcheese macandcheese mentioned this issue Nov 4, 2021
Closed
@macandcheese
Copy link
Contributor

I think we'll want to re-evaluate the above design - I also don't think this is valid for Dropdown.

The screenshot workflow in OP is valid for Combobox as shown, but likely also Pick List as described. @asangma do you have thoughts on select / deselect workflow in pick List?

Do we want to separate this out to scope the enhancements to Combobox from those to Pick List?

@jcfranco
Copy link
Member

jcfranco commented Jan 7, 2022

Do we want to separate this out to scope the enhancements to Combobox from those to Pick List?

I think separate issues would be good. Do we also need to include the value list too? cc @benelan

@geospatialem geospatialem changed the title Enhancement: Select all/none for pick-list/dropdown/combobox Enhancement: Select all/none for list/dropdown/combobox Mar 3, 2023
@geospatialem geospatialem added the p - medium Issue is non core or affecting less that 60% of people using the library label Mar 3, 2023
@geospatialem
Copy link
Member

Related combobox issues with select all: #2162, #3074, #4738

@brittneytewks brittneytewks added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Mar 30, 2023
@ashetland ashetland added the c-combobox Issues that pertain to the calcite-combobox and related components label Apr 3, 2023
@ashetland ashetland mentioned this issue Apr 3, 2023
Closed
9 tasks
@geospatialem
Copy link
Member

Reassigning to June for design considerations prior to development.

@ashetland ashetland mentioned this issue Oct 22, 2024
Closed
9 tasks
@jcfranco
Copy link
Member

@ashetland For clarification purposes, can you confirm if unchecking the select all checkbox would deselect all options?

@ashetland
Copy link
Contributor

Yes, it should act as a toggle.

@Elijbet Elijbet self-assigned this Mar 6, 2025
@Elijbet Elijbet added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Mar 6, 2025
@Elijbet Elijbet mentioned this issue Mar 8, 2025
Merged
@ashetland
Copy link
Contributor

Related to the bug in Table documented in #11143, if Combobox Items are disabled, they should not be selected or deselected when a user toggles select-all. cc @macandcheese @Elijbet

@driskull
Copy link
Member

@ashetland should there be any indeterminate state of the checkbox?

https://www.sitelint.com/blog/definitive-guide-to-indeterminate-state-of-a-checkbox

I would suspect it to work like this: https://codepen.io/sitelint/pen/BavyreE

@macandcheese
Copy link
Contributor

macandcheese commented Apr 21, 2025 •
edited
Loading

That follows what we do on Table + Tree 👍

@ashetland
Copy link
Contributor

Yep, agreed 👍

Elijbet added a commit that referenced this issue May 13, 2025
@Elijbet @driskull
feat(combobox): add selectAll toggle property (#11721)
7dab04f 
**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]>
@Elijbet Elijbet added 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. and removed 2 - in development Issues that are actively being worked on. labels May 13, 2025
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented May 13, 2025

🍠 Verified locally on dev

@DitwanP DitwanP closed this as completed May 13, 2025
@DitwanP DitwanP added 4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. and removed 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. labels May 13, 2025
benelan pushed a commit that referenced this issue May 14, 2025
@Elijbet @driskull @benelan
feat(combobox): add selectAll toggle property (#11721)
d084410 
**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]>
This was referenced May 23, 2025
Merged
Merged
Elijbet added a commit that referenced this issue May 27, 2025
@Elijbet
refactor(combobox): Select All toggle logic (#12150)
b07d396 
**Related Issue:** #11721, #2311

## Summary
Refactor the `combobox` `Select All` toggle logic.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. c-combobox Issues that pertain to the calcite-combobox and related components design Issues that need design consultation prior to, or during, development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2025-05-13 - 3.2.0 May Main Release
Development

No branches or pull requests