From 50a08dd8008b0383ba8daec9371df01107fe8b4d Mon Sep 17 00:00:00 2001
From: Raashish Aggarwal <94279692+raashish1601@users.noreply.github.com>
Date: Sat, 2 May 2026 09:57:39 +0530
Subject: [PATCH] Fix unmatched select size value handling

---
 .../src/client/ReactDOMSelect.js              |  4 +-
 .../src/__tests__/ReactDOMSelect-test.js      | 39 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

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 = (
+      <select size="2" value="giraffe" onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    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(
+        <select size="2" value="not-an-option" onChange={noop}>
+          {options}
+        </select>,
+      );
+    });
+
+    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 = (
       <select value={'giraffe'} onChange={noop}>