feat: Add support for multiple selection to Select and Picker (#8734)

* feat: Add support for multiple selection to Select

* Add example with TagGroup

* Use checkboxes for multi-select

* lint

* yarn

Author: devongovett

packages/@react-aria/select/src/HiddenSelect.tsx

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {FocusableElement, RefObject} from '@react-types/shared';
+import {FocusableElement, Key, RefObject} from '@react-types/shared';
 import React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';
 import {selectData} from './useSelect';
+import {SelectionMode} from '@react-types/select';
 import {SelectState} from '@react-stately/select';
 import {useFormReset} from '@react-aria/utils';
 import {useFormValidation} from '@react-aria/form';
@@ -41,9 +42,9 @@ export interface AriaHiddenSelectProps {
   isDisabled?: boolean
 }
 
-export interface HiddenSelectProps<T> extends AriaHiddenSelectProps {
+export interface HiddenSelectProps<T, M extends SelectionMode = 'single'> extends AriaHiddenSelectProps {
   /** State for the select. */
-  state: SelectState<T>,
+  state: SelectState<T, M>,
 
   /** A ref to the trigger element. */
   triggerRef: RefObject<FocusableElement | null>
@@ -70,7 +71,7 @@ export interface HiddenSelectAria {
  * can be used in combination with `useSelect` to support browser form autofill, mobile form
  * navigation, and native HTML form submission.
  */
-export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement | null>): HiddenSelectAria {
+export function useHiddenSelect<T, M extends SelectionMode = 'single'>(props: AriaHiddenSelectOptions, state: SelectState<T, M>, triggerRef: RefObject<FocusableElement | null>): HiddenSelectAria {
   let data = selectData.get(state) || {};
   let {autoComplete, name = data.name, form = data.form, isDisabled = data.isDisabled} = props;
   let {validationBehavior, isRequired} = data;
@@ -83,14 +84,23 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
     }
   });
 
-  useFormReset(props.selectRef, state.defaultSelectedKey, state.setSelectedKey);
+  useFormReset(props.selectRef, state.defaultValue, state.setValue);
   useFormValidation({
     validationBehavior,
     focus: () => triggerRef.current?.focus()
   }, state, props.selectRef);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement> | React.FormEvent<HTMLSelectElement>) => state.setSelectedKey(e.currentTarget.value), [state.setSelectedKey]);
+  let setValue = state.setValue;
+  let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    if (e.target.multiple) {
+      setValue(Array.from(
+        e.target.selectedOptions,
+        (option) => option.value
+      ) as any);
+    } else {
+      setValue(e.currentTarget.value as any);
+    }
+  }, [setValue]);
 
   // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
   // In Firefox, there must be a <label> to identify the <select> whereas other browsers
@@ -114,10 +124,11 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
       tabIndex: -1,
       autoComplete,
       disabled: isDisabled,
+      multiple: state.selectionManager.selectionMode === 'multiple',
       required: validationBehavior === 'native' && isRequired,
       name,
       form,
-      value: state.selectedKey ?? '',
+      value: (state.value as string | string[]) ?? '',
       onChange,
       onInput: onChange
     }
@@ -128,7 +139,7 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
  * Renders a hidden native `<select>` element, which can be used to support browser
  * form autofill, mobile form navigation, and native form submission.
  */
-export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null {
+export function HiddenSelect<T, M extends SelectionMode = 'single'>(props: HiddenSelectProps<T, M>): JSX.Element | null {
   let {state, triggerRef, label, name, form, isDisabled} = props;
   let selectRef = useRef(null);
   let inputRef = useRef(null);
@@ -164,32 +175,43 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null
     let data = selectData.get(state) || {};
     let {validationBehavior} = data;
 
-    let inputProps: InputHTMLAttributes<HTMLInputElement> = {
-      type: 'hidden',
-      autoComplete: selectProps.autoComplete,
-      name,
-      form,
-      disabled: isDisabled,
-      value: state.selectedKey ?? ''
-    };
+    // Always render at least one hidden input to ensure required form submission.
+    let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];
+    if (values.length === 0) {
+      values = [null];
+    }
+    
+    let res = values.map((value, i) => {
+      let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+        type: 'hidden',
+        autoComplete: selectProps.autoComplete,
+        name,
+        form,
+        disabled: isDisabled,
+        value: value ?? ''
+      };
+
+      if (validationBehavior === 'native') {
+        // Use a hidden <input type="text"> rather than <input type="hidden">
+        // so that an empty value blocks HTML form submission when the field is required.
+        return (
+          <input
+            key={i}
+            {...inputProps}
+            ref={i === 0 ? inputRef : null}
+            style={{display: 'none'}}
+            type="text"
+            required={i === 0 ? selectProps.required : false}
+            onChange={() => {/** Ignore react warning. */}} />
+        );
+      }
 
-    if (validationBehavior === 'native') {
-      // Use a hidden <input type="text"> rather than <input type="hidden">
-      // so that an empty value blocks HTML form submission when the field is required.
       return (
-        <input
-          {...inputProps}
-          ref={inputRef}
-          style={{display: 'none'}}
-          type="text"
-          required={selectProps.required}
-          onChange={() => {/** Ignore react warning. */}} />
+        <input key={i} {...inputProps} ref={i === 0 ? inputRef : null} />
       );
-    }
+    });
 
-    return (
-      <input {...inputProps} ref={inputRef} />
-    );
+    return <>{res}</>;
   }
 
   return null;

packages/@react-aria/select/src/useSelect.ts

@@ -12,7 +12,7 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import {AriaListBoxOptions} from '@react-aria/listbox';
-import {AriaSelectProps} from '@react-types/select';
+import {AriaSelectProps, SelectionMode} from '@react-types/select';
 import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';
 import {FocusEvent, useMemo} from 'react';
@@ -24,15 +24,15 @@ import {useCollator} from '@react-aria/i18n';
 import {useField} from '@react-aria/label';
 import {useMenuTrigger} from '@react-aria/menu';
 
-export interface AriaSelectOptions<T> extends Omit<AriaSelectProps<T>, 'children'> {
+export interface AriaSelectOptions<T, M extends SelectionMode = 'single'> extends Omit<AriaSelectProps<T, M>, 'children'> {
   /**
    * An optional keyboard delegate implementation for type to select,
    * to override the default.
    */
   keyboardDelegate?: KeyboardDelegate
 }
 
-export interface SelectAria<T> extends ValidationResult {
+export interface SelectAria<T, M extends SelectionMode = 'single'> extends ValidationResult {
   /** Props for the label element. */
   labelProps: DOMAttributes,
 
@@ -52,7 +52,7 @@ export interface SelectAria<T> extends ValidationResult {
   errorMessageProps: DOMAttributes,
 
   /** Props for the hidden select element. */
-  hiddenSelectProps: HiddenSelectProps<T>
+  hiddenSelectProps: HiddenSelectProps<T, M>
 }
 
 interface SelectData {
@@ -63,15 +63,15 @@ interface SelectData {
   validationBehavior?: 'aria' | 'native'
 }
 
-export const selectData: WeakMap<SelectState<any>, SelectData> = new WeakMap<SelectState<any>, SelectData>();
+export const selectData: WeakMap<SelectState<any, any>, SelectData> = new WeakMap<SelectState<any>, SelectData>();
 
 /**
  * Provides the behavior and accessibility implementation for a select component.
  * A select displays a collapsible list of options and allows a user to select one of them.
  * @param props - Props for the select.
  * @param state - State for the select, as returned by `useListState`.
  */
-export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<HTMLElement | null>): SelectAria<T> {
+export function useSelect<T, M extends SelectionMode = 'single'>(props: AriaSelectOptions<T, M>, state: SelectState<T, M>, ref: RefObject<HTMLElement | null>): SelectAria<T, M> {
   let {
     keyboardDelegate,
     isDisabled,
@@ -96,6 +96,10 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
   );
 
   let onKeyDown = (e: KeyboardEvent) => {
+    if (state.selectionManager.selectionMode === 'multiple') {
+      return;
+    }
+    
     switch (e.key) {
       case 'ArrowLeft': {
         // prevent scrolling containers
@@ -138,6 +142,9 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
 
   typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
   delete typeSelectProps.onKeyDownCapture;
+  if (state.selectionManager.selectionMode === 'multiple') {
+    typeSelectProps = {};
+  }
 
   let domProps = filterDOMProps(props, {labelable: true});
   let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);

packages/@react-aria/test-utils/src/select.ts

@@ -184,6 +184,8 @@ export class SelectTester {
         throw new Error('Target option not found in the listbox.');
       }
 
+      let isMultiSelect = listbox.getAttribute('aria-multiselectable') === 'true';
+
       if (interactionType === 'keyboard') {
         if (option?.getAttribute('aria-disabled') === 'true') {
           return;
@@ -203,7 +205,7 @@ export class SelectTester {
         }
       }
 
-      if (option?.getAttribute('href') == null) {
+      if (!isMultiSelect && option?.getAttribute('href') == null) {
         await waitFor(() => {
           if (document.activeElement !== this._trigger) {
             throw new Error(`Expected the document.activeElement after selecting an option to be the select component trigger but got ${document.activeElement}`);

packages/@react-spectrum/picker/test/Picker.test.js

@@ -1508,8 +1508,7 @@ describe('Picker', function () {
       expect(document.activeElement).toBe(items[1]);
 
       await selectTester.selectOption({option: 'Two'});
-      expect(onSelectionChange).toHaveBeenCalledTimes(1);
-      expect(onSelectionChange).toHaveBeenCalledWith('two');
+      expect(onSelectionChange).not.toHaveBeenCalled();
 
       expect(document.activeElement).toBe(picker);
       expect(picker).toHaveTextContent('Two');

packages/@react-spectrum/s2/src/Menu.tsx

@@ -211,7 +211,7 @@ export let checkmark = style({
   aspectRatio: 'square'
 });
 
-let checkbox = style({
+export let checkbox = style({
   gridArea: 'checkmark',
   marginEnd: 'text-to-control'
 });

packages/@react-spectrum/s2/src/Picker.tsx

@@ -33,8 +33,10 @@ import {
 } from 'react-aria-components';
 import {AsyncLoadable, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';
 import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};
+import {box, iconStyles as checkboxIconStyles} from './Checkbox';
 import {centerBaseline} from './CenterBaseline';
 import {
+  checkbox,
   checkmark,
   description,
   icon,
@@ -64,6 +66,7 @@ import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
@@ -91,8 +94,9 @@ export interface PickerStyleProps {
   isQuiet?: boolean
 }
 
-export interface PickerProps<T extends object> extends
-  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>,
+type SelectionMode = 'single' | 'multiple';
+export interface PickerProps<T extends object, M extends SelectionMode = 'single'> extends
+  Omit<AriaSelectProps<T, M>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>,
   PickerStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -262,7 +266,7 @@ let InsideSelectValueContext = createContext(false);
 /**
  * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
  */
-export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object, M extends SelectionMode = 'single'>(props: PickerProps<T, M>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
   let domRef = useFocusableRef(ref);
@@ -507,7 +511,7 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
         {(renderProps) => (
           <>
             <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>
-              {({defaultChildren}) => {
+              {({selectedItems, defaultChildren, selectedText}) => {
                 return (
                   <Provider
                     values={[
@@ -531,7 +535,7 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
                       }],
                       [InsideSelectValueContext, true]
                     ]}>
-                    {defaultChildren}
+                    {selectedItems.length <= 1 ? defaultChildren : <Text slot="label">{selectedText}</Text>}
                   </Provider>
                 );
               }}
@@ -577,6 +581,7 @@ export function PickerItem(props: PickerItemProps): ReactNode {
       className={renderProps => (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)}>
       {(renderProps) => {
         let {children} = props;
+        let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};
         return (
           <DefaultProvider
             context={IconContext}
@@ -591,7 +596,12 @@ export function PickerItem(props: PickerItemProps): ReactNode {
                   description: {styles: description({...renderProps, size})}
                 }
               }}>
-              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
+              {renderProps.selectionMode === 'single' && !isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
+              {renderProps.selectionMode === 'multiple' && !isLink && (
+                <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>
+                  <CheckmarkIcon size={size} className={checkboxIconStyles} />
+                </div>
+              )}
               {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
             </DefaultProvider>
           </DefaultProvider>

packages/@react-spectrum/s2/stories/Picker.stories.tsx

@@ -41,7 +41,7 @@ const meta: Meta<typeof Picker<any>> = {
   decorators: [StaticColorDecorator],
   tags: ['autodocs'],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onOpenChange', 'onSelectionChange', 'onLoadMore']),
+    ...categorizeArgTypes('Events', ['onOpenChange', 'onChange', 'onLoadMore']),
     label: {control: {type: 'text'}},
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},

packages/@react-stately/combobox/package.json

@@ -30,7 +30,6 @@
     "@react-stately/form": "^3.2.1",
     "@react-stately/list": "^3.13.0",
     "@react-stately/overlays": "^3.6.19",
-    "@react-stately/select": "^3.7.1",
     "@react-stately/utils": "^3.10.8",
     "@react-types/combobox": "^3.13.8",
     "@react-types/shared": "^3.32.0",

packages/@react-stately/combobox/src/useComboBoxState.ts

@@ -14,13 +14,14 @@ import {Collection, CollectionStateBase, FocusStrategy, Key, Node} from '@react-
 import {ComboBoxProps, MenuTriggerAction} from '@react-types/combobox';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {getChildNodes} from '@react-stately/collections';
-import {ListCollection, useSingleSelectListState} from '@react-stately/list';
-import {SelectState} from '@react-stately/select';
+import {ListCollection, SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
+import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useControlledState} from '@react-stately/utils';
-import {useOverlayTriggerState} from '@react-stately/overlays';
 
-export interface ComboBoxState<T> extends SelectState<T>, FormValidationState{
+export interface ComboBoxState<T> extends SingleSelectListState<T>, OverlayTriggerState, FormValidationState {
+  /** The default selected key. */
+  readonly defaultSelectedKey: Key | null,
   /** The current value of the combo box input. */
   inputValue: string,
   /** The default value of the combo box input. */
@@ -31,6 +32,10 @@ export interface ComboBoxState<T> extends SelectState<T>, FormValidationState{
   commit(): void,
   /** Controls which item will be auto focused when the menu opens. */
   readonly focusStrategy: FocusStrategy | null,
+  /** Whether the select is currently focused. */
+  readonly isFocused: boolean,
+  /** Sets whether the select is focused. */
+  setFocused(isFocused: boolean): void,
   /** Opens the menu. */
   open(focusStrategy?: FocusStrategy | null, trigger?: MenuTriggerAction): void,
   /** Toggles the menu. */

packages/@react-stately/select/package.json

@@ -29,6 +29,7 @@
     "@react-stately/form": "^3.2.1",
     "@react-stately/list": "^3.13.0",
     "@react-stately/overlays": "^3.6.19",
+    "@react-stately/utils": "^3.10.8",
     "@react-types/select": "^3.10.1",
     "@react-types/shared": "^3.32.0",
     "@swc/helpers": "^0.5.0"