From 11f8aa15cd11f2674660c7d7a40a74c47ced0053 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Fri, 10 Oct 2025 12:34:49 -0700
Subject: [PATCH 1/2] Update HTML parser rules for new select parser

The HTML spec was updated to remove most special parsing rules for
select elements. This PR updates the logic in validateDOMNesting to
match the new HTML spec so that authors can use the new parsing rules
without getting errors in React.

Fixes https://github.com/facebook/react/issues/33609
---
 .../src/client/validateDOMNesting.js          | 20 ++++---------------
 .../src/__tests__/validateDOMNesting-test.js  | 11 ++++++++++
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/validateDOMNesting.js b/packages/react-dom-bindings/src/client/validateDOMNesting.js
index 47aef9353ba85..e02d40be797a2 100644
--- a/packages/react-dom-bindings/src/client/validateDOMNesting.js
+++ b/packages/react-dom-bindings/src/client/validateDOMNesting.js
@@ -180,6 +180,7 @@ const inScopeTags = [
   'th',
   'marquee',
   'object',
+  'select',
   'template',
 
   // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point
@@ -306,22 +307,6 @@ function isTagValidWithParent(
 ): boolean {
   // First, let's check if we're in an unusual parsing mode...
   switch (parentTag) {
-    // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
-    case 'select':
-      return (
-        tag === 'hr' ||
-        tag === 'option' ||
-        tag === 'optgroup' ||
-        tag === 'script' ||
-        tag === 'template' ||
-        tag === '#text'
-      );
-    case 'optgroup':
-      return tag === 'option' || tag === '#text';
-    // Strictly speaking, seeing an <option> doesn't mean we're in a <select>
-    // but
-    case 'option':
-      return tag === '#text';
     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
     // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
     // No special behavior since these rules fall back to "in body" mode for
@@ -423,6 +408,9 @@ function isTagValidWithParent(
     case 'caption':
     case 'col':
     case 'colgroup':
+    case 'input':
+      // <input> causes open <select> tags to close.
+      return parentTag !== 'select';
     case 'frameset':
     case 'frame':
     case 'tbody':
diff --git a/packages/react-dom/src/__tests__/validateDOMNesting-test.js b/packages/react-dom/src/__tests__/validateDOMNesting-test.js
index 0c5de0cc259dd..1aeace0ab3422 100644
--- a/packages/react-dom/src/__tests__/validateDOMNesting-test.js
+++ b/packages/react-dom/src/__tests__/validateDOMNesting-test.js
@@ -51,6 +51,8 @@ function expectWarnings(tags, warnings = [], withoutStack = 0) {
     const Tag = tags.pop();
     if (Tag === '#text') {
       element = 'text';
+    } else if (Tag === 'option') {
+      element = <Tag value={'value'}>{element}</Tag>;
     } else {
       element = <Tag>{element}</Tag>;
     }
@@ -77,6 +79,7 @@ describe('validateDOMNesting', () => {
     expectWarnings(['div', 'p', 'button', 'p']);
     expectWarnings(['p', 'svg', 'foreignObject', 'p']);
     expectWarnings(['html', 'body', 'div']);
+    expectWarnings(['select', 'div', 'optgroup', 'div', 'option', 'span']);
 
     // Invalid, but not changed by browser parsing so we allow them
     expectWarnings(['div', 'ul', 'ul', 'li']);
@@ -205,6 +208,14 @@ describe('validateDOMNesting', () => {
           '    in body (at **)',
       ],
     );
+    expectWarnings(
+      ['select', 'input'],
+      [
+        'In HTML, <input> cannot be a child of <select>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in input (at **)',
+      ],
+    );
   });
 
   it('relaxes the nesting rules at the root when the container is a singleton', () => {

From 55aa9b21d721dce6ba354dc6a8cb1ab7aed5e917 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Fri, 10 Oct 2025 12:42:50 -0700
Subject: [PATCH 2/2] update reactdomoption-test

---
 .../src/__tests__/ReactDOMOption-test.js      | 25 ++-----------------
 1 file changed, 2 insertions(+), 23 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index 9859fb67f1270..632f5c6337bb2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -44,23 +44,13 @@ describe('ReactDOMOption', () => {
     expect(container.firstChild.innerHTML).toBe('1 foo');
   });
 
-  it('should warn for invalid child tags', async () => {
+  it('should not warn for a child div tag', async () => {
     const el = (
       <option value="12">
         {1} <div /> {2}
       </option>
     );
     const container = await renderIntoDocument(el);
-    assertConsoleErrorDev([
-      'In HTML, <div> cannot be a child of <option>.\n' +
-        'This will cause a hydration error.\n' +
-        '\n' +
-        '> <option value="12">\n' +
-        '>   <div>\n' +
-        '    ...\n' +
-        '\n' +
-        '    in div (at **)',
-    ]);
     expect(container.firstChild.innerHTML).toBe('1 <div></div> 2');
     await renderIntoDocument(el);
   });
@@ -239,7 +229,7 @@ describe('ReactDOMOption', () => {
     expect(node.selectedIndex).toEqual(2);
   });
 
-  it('generates a hydration error when an invalid nested tag is used as a child', async () => {
+  it('does not generate a hydration error when a div tag is used as a child', async () => {
     const ref = React.createRef();
     const children = (
       <select readOnly={true} value="bar">
@@ -267,17 +257,6 @@ describe('ReactDOMOption', () => {
         onRecoverableError: () => {},
       });
     });
-    assertConsoleErrorDev([
-      'In HTML, <div> cannot be a child of <option>.\n' +
-        'This will cause a hydration error.\n' +
-        '\n' +
-        '  <select readOnly={true} value="bar">\n' +
-        '>   <option value="bar">\n' +
-        '>     <div ref={{current:null}}>\n' +
-        '      ...\n' +
-        '\n' +
-        '    in div (at **)',
-    ]);
     option = container.firstChild.firstChild;
 
     expect(option.textContent).toBe('BarFooBaz');