diff --git a/packages/react-dom-bindings/src/client/ReactDOMSelect.js b/packages/react-dom-bindings/src/client/ReactDOMSelect.js index 00136aa8175..a0378d5c347 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMSelect.js +++ b/packages/react-dom-bindings/src/client/ReactDOMSelect.js @@ -152,7 +152,7 @@ export function initSelect( const node: HTMLSelectElement = (element: any); node.multiple = !!multiple; if (value != null) { - updateOptions(node, !!multiple, value, false); + updateOptions(node, !!multiple, value, true); } else if (defaultValue != null) { updateOptions(node, !!multiple, defaultValue, true); } @@ -221,7 +221,7 @@ export function updateSelect( const node: HTMLSelectElement = (element: any); if (value != null) { - updateOptions(node, !!multiple, value, false); + updateOptions(node, !!multiple, value, true); } else if (!!wasMultiple !== !!multiple) { // For simplicity, reapply `defaultValue` if `multiple` is toggled. if (defaultValue != null) { @@ -238,6 +238,6 @@ export function restoreControlledSelectState(element: Element, props: Object) { const value = props.value; if (value != null) { - updateOptions(node, !!props.multiple, value, false); + updateOptions(node, !!props.multiple, value, true); } } diff --git a/packages/react-dom/src/__tests__/ReactDOMForm-test.js b/packages/react-dom/src/__tests__/ReactDOMForm-test.js index 21995b68f44..7fbd5f9f6a0 100644 --- a/packages/react-dom/src/__tests__/ReactDOMForm-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMForm-test.js @@ -2355,4 +2355,92 @@ describe('ReactDOMForm', () => { assertLog(['[unrelated form] pending: false, state: 1']); }); + + it('controlled select elements maintain their value after form reset', async () => { + const formRef = React.createRef(); + const selectRef = React.createRef(); + const inputRef = React.createRef(); + + function App() { + const [selectedType, setSelectedType] = useState('2'); + const [inputValue, setInputValue] = useState('test'); + + return ( +
+ ); + } + + // Initial render + const root = ReactDOMClient.createRoot(container); + await act(() => root.render(