feat: add Select All / Deselect All support for multi-select#144
Open
govindarajug wants to merge 1 commit into
Open
feat: add Select All / Deselect All support for multi-select#144govindarajug wants to merge 1 commit into
govindarajug wants to merge 1 commit into
Conversation
Adds an opt-in `enableSelectAll` prop that prepends a "Select All" /
"Deselect All" option at the top of the menu when `isMulti` is true.
Key behaviors:
- Label toggles between "Select All" and "Deselect All" based on
whether all visible options are currently selected
- Respects search filtering: only selects/deselects options matching
the current search input
- Works with both flat and grouped options
- Custom labels via `enableSelectAll={{ selectAllLabel, deselectAllLabel }}`
- Composes with custom Option components passed via `components` prop
- Does not affect single-select behavior
This is one of the most requested features for react-select based
libraries (JedWatson/react-select#3543, #2032, #747, #3668, #3860).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds an opt-in
enableSelectAllprop that prepends a "Select All" / "Deselect All" option at the top of the menu whenisMultiis true. This is one of the most commonly requested features for react-select based libraries.Usage
Behaviors
{ selectAllLabel, deselectAllLabel }to override defaultscomponents.Optionis preserved for non-select-all rowsisMultigetOptionValue— respects the provided value accessorChanges
WindowedSelect.tsx— newenableSelectAllprop, option injection, onChange interception, Option component wrappingutil.ts— newflattenOptionsutility for extracting options from grouped structuresRelated issues
This addresses one of the most requested features in the react-select ecosystem:
Test plan
enableSelectAll: no Select All option showngetOptionValue: Select All correctly identifies selected statecomponents.Option: preserved for regular options, select-all row uses wrapper