diff --git a/packages/react-dom-bindings/src/client/ReactDOMSelect.js b/packages/react-dom-bindings/src/client/ReactDOMSelect.js index 00136aa8175b..06ead2834c05 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMSelect.js +++ b/packages/react-dom-bindings/src/client/ReactDOMSelect.js @@ -101,8 +101,10 @@ function updateOptions( defaultSelected = options[i]; } } - if (defaultSelected !== null) { + if (defaultSelected !== null && node.size <= 1) { defaultSelected.selected = true; + } else if (node.size > 1) { + node.selectedIndex = -1; } } } diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js index c90455307d0f..ba11b673ca42 100644 --- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js @@ -486,6 +486,45 @@ describe('ReactDOMSelect', () => { expect(select.selectedIndex).toBe(-1); }); + it('does not select an item when size is greater than 1 and value does not match', async () => { + const stub = ( + + ); + const options = stub.props.children; + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + + await act(() => { + root.render(stub); + }); + + const select = container.firstChild; + + expect(select.options[0].selected).toBe(false); + expect(select.options[1].selected).toBe(true); + expect(select.options[2].selected).toBe(false); + expect(select.value).toBe('giraffe'); + expect(select.selectedIndex).toBe(1); + + await act(() => { + root.render( + , + ); + }); + + expect(select.options[0].selected).toBe(false); + expect(select.options[1].selected).toBe(false); + expect(select.options[2].selected).toBe(false); + expect(select.value).toBe(''); + expect(select.selectedIndex).toBe(-1); + }); + it('should remember value when switching to uncontrolled', async () => { const stub = (