fix: ComboBox correctly resets to defaultSelectedKey (#9129)

Author: chirokas

packages/@react-aria/combobox/src/useComboBox.ts

@@ -16,7 +16,7 @@ import {AriaComboBoxProps} from '@react-types/combobox';
 import {ariaHideOutside} from '@react-aria/overlays';
 import {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';
 import {BaseEvent, DOMAttributes, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared';
-import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useEvent, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
+import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useEvent, useFormReset, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
 import {ComboBoxState} from '@react-stately/combobox';
 import {dispatchVirtualFocus} from '@react-aria/focus';
 import {FocusEvent, InputHTMLAttributes, KeyboardEvent, TouchEvent, useEffect, useMemo, useRef} from 'react';
@@ -220,6 +220,8 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     [privateValidationStateProp]: state
   }, inputRef);
 
+  useFormReset(inputRef, state.defaultSelectedKey, state.setSelectedKey);
+  
   // Press handlers for the ComboBox button
   let onPress = (e: PressEvent) => {
     if (e.pointerType === 'touch') {

packages/@react-spectrum/combobox/test/ComboBox.test.js

@@ -5268,26 +5268,30 @@ describe('ComboBox', function () {
 
       if (parseInt(React.version, 10) >= 19) {
         it('resets to defaultSelectedKey when submitting form action', async () => {
-          function Test() {        
+          function Test(props) {        
             const [value, formAction] = React.useActionState(() => '2', '1');
 
             return (
               <Provider theme={theme}>
                 <form action={formAction}>
-                  <ExampleComboBox defaultSelectedKey={value} />
+                  <ExampleComboBox defaultSelectedKey={value} name="combobox" {...props} />
                   <input type="submit" data-testid="submit" />
                 </form>
               </Provider>
             );
           }
 
-          let {getByTestId, getByRole} = render(<Test />);
+          let {getByTestId, getByRole, rerender} = render(<Test />);
           let input = getByRole('combobox');
           expect(input).toHaveValue('One');
 
           let button = getByTestId('submit');
           await act(async () => await user.click(button));
           expect(input).toHaveValue('Two');
+
+          rerender(<Test formValue="key" />);
+          await act(async () => await user.click(button));
+          expect(document.querySelector('input[name=combobox]')).toHaveValue('2');
         });
       }
 
@@ -5597,26 +5601,30 @@ describe('ComboBox', function () {
 
       if (parseInt(React.version, 10) >= 19) {
         it('resets to defaultSelectedKey when submitting form action', async () => {
-          function Test() {
+          function Test(props) {
             const [value, formAction] = React.useActionState(() => '2', '1');
 
             return (
               <Provider theme={theme}>
                 <form action={formAction}>
-                  <ExampleComboBox name="combobox" defaultSelectedKey={value} />
+                  <ExampleComboBox name="combobox" defaultSelectedKey={value} {...props} />
                   <input type="submit" data-testid="submit" />
                 </form>
               </Provider>
             );
           }
 
-          let {getByTestId} = render(<Test />);
+          let {getByTestId, rerender} = render(<Test />);
           let input = document.querySelector('input[name=combobox]');
           expect(input).toHaveValue('One');
 
           let button = getByTestId('submit');
           await act(async () => await user.click(button));
           expect(input).toHaveValue('Two');
+
+          rerender(<Test formValue="key" />);
+          await act(async () => await user.click(button));
+          expect(input).toHaveValue('2');
         });
       }
 

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

@@ -256,6 +256,41 @@ describe('ComboBox', () => {
     expect(document.querySelector('input[type=hidden]')).toBeNull();
   });
 
+  it('should support form reset', async () => {
+    const tree = render(
+      <form>
+        <ComboBox defaultSelectedKey="2" name="combobox">
+          <Label>Favorite Animal</Label>
+          <Input />
+          <Button />
+          <FieldError />
+          <Popover>
+            <ListBox>
+              <ListBoxItem id="1">Cat</ListBoxItem>
+              <ListBoxItem id="2">Dog</ListBoxItem>
+              <ListBoxItem id="3">Kangaroo</ListBoxItem>
+            </ListBox>
+          </Popover>
+        </ComboBox>
+        <input type="reset" />
+      </form>
+    );
+  
+    const comboboxTester = testUtilUser.createTester('ComboBox', {root: tree.container});
+    const combobox = comboboxTester.combobox;
+  
+    expect(combobox).toHaveValue('Dog');
+    await comboboxTester.open();
+  
+    const options = comboboxTester.options();
+    await user.click(options[0]);
+    expect(combobox).toHaveValue('Cat');
+  
+    await user.click(document.querySelector('input[type="reset"]'));
+    expect(combobox).toHaveValue('Dog');
+    expect(document.querySelector('input[name=combobox]')).toHaveValue('2');
+  });
+
   it('should render data- attributes on outer element', () => {
     let {getAllByTestId} = render(
       <TestComboBox data-testid="combo-box" />