Fix className hydration warning for custom elements

facebook · Mar 30, 2023 · e1314a2 · e1314a2
1 parent 3499590
commit e1314a2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/packages/react-dom-bindings/src/client/DOMPropertyOperations.js b/packages/react-dom-bindings/src/client/DOMPropertyOperations.js
@@ -231,6 +231,10 @@ export function getValueForAttributeOnCustomComponent(
     if (!isAttributeNameSafe(name)) {
       return;
     }
+    if (enableCustomElementPropertySupport && name === 'className') {
+      // className is a special cased property on the server to render as an attribute.
+      name = 'class';
+    }
     if (!node.hasAttribute(name)) {
       // shouldRemoveAttribute
       switch (typeof expected) {
@@ -253,10 +257,6 @@ export function getValueForAttributeOnCustomComponent(
       }
       return expected === undefined ? undefined : null;
     }
-    if (enableCustomElementPropertySupport && name === 'className') {
-      // className is a special cased property on the server to render as an attribute.
-      name = 'class';
-    }
     const value = node.getAttribute(name);
 
     if (enableCustomElementPropertySupport) {

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -662,16 +662,13 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('className for custom elements', async render => {
+      const e = await render(<custom-element className="test" />, 0);
       if (ReactFeatureFlags.enableCustomElementPropertySupport) {
-        const e = await render(
-          <custom-element className="test" />,
-          render === clientRenderOnServerString ? 1 : 0,
-        );
         expect(e.getAttribute('className')).toBe(null);
         expect(e.getAttribute('class')).toBe('test');
       } else {
-        const e = await render(<custom-element className="test" />, 0);
         expect(e.getAttribute('className')).toBe('test');
+        expect(e.getAttribute('class')).toBe(null);
       }
     });