Fix: required validation for multi-select ComboBox (#9788)

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

@@ -350,7 +350,7 @@ export function useComboBoxState<T extends object, M extends SelectionMode = 'si
 
   let validation = useFormValidationState({
     ...props,
-    value: useMemo(() => Array.isArray(displayValue) && displayValue.length === 0 ? null : ({inputValue, value: displayValue as any, selectedKey}), [inputValue, selectedKey, displayValue])
+    value: useMemo(() => ({inputValue, value: displayValue as any, selectedKey}), [inputValue, selectedKey, displayValue])
   });
 
   // Revert input value and close menu

packages/react-aria-components/src/ComboBox.tsx

@@ -152,6 +152,10 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
   let [labelRef, label] = useSlot(
     !props['aria-label'] && !props['aria-labelledby']
   );
+  let comboBoxProps = removeDataAttributes(props);
+  if (props.selectionMode === 'multiple') {
+    delete comboBoxProps.isRequired;
+  }
   let {
     buttonProps,
     inputProps,
@@ -162,7 +166,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
     valueProps,
     ...validation
   } = useComboBox({
-    ...removeDataAttributes(props),
+    ...comboBoxProps,
     label,
     inputRef,
     buttonRef,
@@ -210,12 +214,14 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
   if (name && formValue === 'key') {
     let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];
     if (values.length === 0) {
-      values = [null];
+      // For multiple mode, add required to the hidden input when no values selected
+      let required = props.selectionMode === 'multiple' && props.isRequired;
+      inputs = [<input key="empty" type="hidden" name={name} form={props.form} value="" required={required} />];
+    } else {
+      inputs = values.map((value, i) => (
+        <input key={i} type="hidden" name={name} form={props.form} value={value ?? ''} />
+      ));
     }
-
-    inputs = values.map((value, i) => (
-      <input key={i} type="hidden" name={name} form={props.form} value={value ?? ''} />
-    ));
   }
 
   return (

packages/react-aria-components/test/ComboBox.test.js

@@ -614,17 +614,14 @@ describe('ComboBox', () => {
     expect(listbox).toBeInTheDocument();
     expect(listbox).toBeVisible();
 
-    // Verify we can still interact with options
     let options = comboboxTester.options();
     expect(options.length).toBeGreaterThan(0);
 
-    // Click an option
     await user.click(options[0]);
     act(() => {
       jest.runAllTimers();
     });
 
-    // Verify the combobox is closed and the value is updated
     expect(tree.queryByRole('listbox')).toBeNull();
     expect(comboboxTester.combobox).toHaveValue('Apple');
   });
@@ -718,7 +715,6 @@ describe('ComboBox', () => {
   });
 
   it('should support multi-select with custom value', async () => {
-    // allowsCustomValue doesn't really make sense to use with multi-selection, but test it anyway.
     let {container} = render(<TestComboBox selectionMode="multiple" allowsCustomValue />);
     let comboboxTester = testUtilUser.createTester('ComboBox', {root: container});
 
@@ -762,6 +758,47 @@ describe('ComboBox', () => {
     expect(onChange).toHaveBeenLastCalledWith(['1']);
   });
 
+  it('should support isRequired with multiple selection', async () => {
+    let {container, getByTestId} = render(
+      <Form data-testid="form">
+        <TestComboBox name="combobox" selectionMode="multiple" isRequired />
+        <input type="reset" />
+      </Form>
+    );
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: container});
+    let combobox = comboboxTester.combobox;
+
+    expect(combobox).not.toHaveAttribute('required');
+
+    act(() => {getByTestId('form').checkValidity();});
+    expect(combobox).toHaveAttribute('aria-describedby');
+    expect(container.querySelector('.react-aria-ComboBox')).toHaveAttribute('data-invalid');
+
+    await comboboxTester.open();
+    let options = comboboxTester.options();
+    await user.click(options[0]);
+
+    act(() => {getByTestId('form').checkValidity();});
+    expect(combobox).not.toHaveAttribute('aria-describedby');
+    expect(container.querySelector('.react-aria-ComboBox')).not.toHaveAttribute('data-invalid');
+
+    let hiddenInputs = container.querySelectorAll('input[type="hidden"]');
+    expect(hiddenInputs).toHaveLength(1);
+    expect(hiddenInputs[0]).toHaveAttribute('name', 'combobox');
+    expect(hiddenInputs[0]).toHaveAttribute('value', '1');
+    expect(hiddenInputs[0]).not.toHaveAttribute('required');
+
+    await user.click(options[0]);
+    act(() => {getByTestId('form').checkValidity();});
+    expect(combobox).toHaveAttribute('aria-describedby');
+
+    hiddenInputs = container.querySelectorAll('input[type="hidden"]');
+    expect(hiddenInputs).toHaveLength(1);
+    expect(hiddenInputs[0]).toHaveAttribute('name', 'combobox');
+    expect(hiddenInputs[0]).toHaveAttribute('value', '');
+    expect(hiddenInputs[0]).toHaveAttribute('required');
+  });
+
   it('should not close the combobox when clicking on the input', async () => {
     let onOpenChange = jest.fn();
     let {container, getByRole} = render(<TestComboBox onOpenChange={onOpenChange} />);