Skip to content

feat: add Select All / Deselect All support for multi-select#144

Open
govindarajug wants to merge 1 commit into
jacobworrel:masterfrom
govindarajug:feat/select-all-option
Open

feat: add Select All / Deselect All support for multi-select#144
govindarajug wants to merge 1 commit into
jacobworrel:masterfrom
govindarajug:feat/select-all-option

Conversation

@govindarajug
Copy link
Copy Markdown

Summary

Adds an opt-in enableSelectAll prop that prepends a "Select All" / "Deselect All" option at the top of the menu when isMulti is true. This is one of the most commonly requested features for react-select based libraries.

Usage

// Basic — default labels
<WindowedSelect isMulti enableSelectAll options={options} />

// Custom labels
<WindowedSelect
  isMulti
  enableSelectAll={{
    selectAllLabel: 'Check All',
    deselectAllLabel: 'Uncheck All',
  }}
  options={options}
/>

Behaviors

  • Label toggles between "Select All" and "Deselect All" based on whether all visible options are selected
  • Respects search filtering — only selects/deselects options matching the current search input (e.g. type "foo", click Select All → only options matching "foo" are selected)
  • Works with grouped options — flattens groups for comparison, inserts the toggle at the top
  • Custom labels — pass { selectAllLabel, deselectAllLabel } to override defaults
  • Composes with custom Option components — user-provided components.Option is preserved for non-select-all rows
  • No effect on single-select — feature is gated on isMulti
  • Works with custom getOptionValue — respects the provided value accessor
  • Deselect All preserves non-filtered selections — if user searches "A" and clicks Deselect All, only "A"-matching selections are removed

Changes

  • WindowedSelect.tsx — new enableSelectAll prop, option injection, onChange interception, Option component wrapping
  • util.ts — new flattenOptions utility for extracting options from grouped structures

Related issues

This addresses one of the most requested features in the react-select ecosystem:

Test plan

  • Multi-select with 200+ options: "Select All" appears at top, selects all on click
  • After selecting all, label changes to "Deselect All", click deselects all
  • Type a search term, click "Select All" — only filtered options are selected
  • Type a search term, click "Deselect All" — only filtered options are deselected, others remain
  • Grouped options: Select All appears above first group, selects across groups
  • Single-select with enableSelectAll: no Select All option shown
  • Custom getOptionValue: Select All correctly identifies selected state
  • Custom components.Option: preserved for regular options, select-all row uses wrapper

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).
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