diff --git a/packages/react-dom-bindings/src/client/ReactDOMSelect.js b/packages/react-dom-bindings/src/client/ReactDOMSelect.js index 00136aa8175b..c6aa69c748e5 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMSelect.js +++ b/packages/react-dom-bindings/src/client/ReactDOMSelect.js @@ -101,7 +101,7 @@ function updateOptions( defaultSelected = options[i]; } } - if (defaultSelected !== null) { + if (defaultSelected !== null && node.size <= 1) { defaultSelected.selected = true; } } diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js index c90455307d0f..980028ebc450 100644 --- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js @@ -486,6 +486,63 @@ describe('ReactDOMSelect', () => { expect(select.selectedIndex).toBe(-1); }); + it('does not select the first option when size > 1 and value does not match', async () => { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + + await act(() => { + root.render( + , + ); + }); + + const select = container.firstChild; + + // On initial render the browser handles list box selection (nothing selected). + // On subsequent renders updateOptions runs; it must not fall back to the + // first option for a list box (size > 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.selectedIndex).toBe(-1); + }); + + it('selects the matching option when size > 1 and value matches', async () => { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + + await act(() => { + root.render( + , + ); + }); + + 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'); + }); + it('should remember value when switching to uncontrolled', async () => { const stub = (