diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts index 5fe460012f0..a4400c60aea 100644 --- a/packages/@react-aria/combobox/src/useComboBox.ts +++ b/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(props: AriaComboBoxOptions, 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') { diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js index 8a6b7ee6e54..167e59e665f 100644 --- a/packages/@react-spectrum/combobox/test/ComboBox.test.js +++ b/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 (
- +
); } - let {getByTestId, getByRole} = render(); + let {getByTestId, getByRole, rerender} = render(); let input = getByRole('combobox'); expect(input).toHaveValue('One'); let button = getByTestId('submit'); await act(async () => await user.click(button)); expect(input).toHaveValue('Two'); + + rerender(); + 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 (
- +
); } - let {getByTestId} = render(); + let {getByTestId, rerender} = render(); 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(); + await act(async () => await user.click(button)); + expect(input).toHaveValue('2'); }); } diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js index b786271a0da..2bafd3f9cb6 100644 --- a/packages/react-aria-components/test/ComboBox.test.js +++ b/packages/react-aria-components/test/ComboBox.test.js @@ -218,6 +218,41 @@ describe('ComboBox', () => { expect(document.querySelector('input[type=hidden]')).toBeNull(); }); + it('should support form reset', async () => { + const tree = render( +
+ + + +