diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index 5145b7b8eca28..a22f284e3788e 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js +++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js @@ -716,7 +716,7 @@ function setProp( case 'disableRemotePlayback': case 'formNoValidate': case 'hidden': - case enableNewBooleanProps ? 'inert' : 'formNoValidate': + case 'inert': case 'loop': case 'noModule': case 'noValidate': @@ -728,14 +728,18 @@ function setProp( case 'scoped': case 'seamless': case 'itemScope': { - if (value && typeof value !== 'function' && typeof value !== 'symbol') { - domElement.setAttribute(key, ''); - } else { - domElement.removeAttribute(key); + const isNewBooleanProp = key === 'inert'; + if (enableNewBooleanProps || !isNewBooleanProp) { + if (value && typeof value !== 'function' && typeof value !== 'symbol') { + domElement.setAttribute(key, ''); + } else { + domElement.removeAttribute(key); + } + break; } - break; } // Overloaded Boolean + // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed. case 'capture': case 'download': { // An attribute that can be used as a flag as well as with a value. @@ -2495,7 +2499,7 @@ function diffHydratedGenericElement( case 'disableRemotePlayback': case 'formNoValidate': case 'hidden': - case enableNewBooleanProps ? 'inert' : 'formNoValidate': + case 'inert': case 'loop': case 'noModule': case 'noValidate': @@ -2507,16 +2511,20 @@ function diffHydratedGenericElement( case 'scoped': case 'seamless': case 'itemScope': { - // Some of these need to be lower case to remove them from the extraAttributes list. - hydrateBooleanAttribute( - domElement, - propKey, - propKey.toLowerCase(), - value, - extraAttributes, - ); - continue; + const isNewBooleanProp = propKey === 'inert'; + if (enableNewBooleanProps || !isNewBooleanProp) { + // Some of these need to be lower case to remove them from the extraAttributes list. + hydrateBooleanAttribute( + domElement, + propKey, + propKey.toLowerCase(), + value, + extraAttributes, + ); + continue; + } } + // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed. case 'capture': case 'download': { hydrateOverloadedBooleanAttribute( diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js index 0b6aacf38a3ea..a72175c034c21 100644 --- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js +++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js @@ -1290,7 +1290,7 @@ function pushAttribute( case 'disableRemotePlayback': case 'formNoValidate': case 'hidden': - case enableNewBooleanProps ? 'inert' : 'formNoValidate': + case 'inert': case 'loop': case 'noModule': case 'noValidate': @@ -1302,16 +1302,20 @@ function pushAttribute( case 'scoped': case 'seamless': case 'itemScope': { - // Boolean - if (value && typeof value !== 'function' && typeof value !== 'symbol') { - target.push( - attributeSeparator, - stringToChunk(name), - attributeEmptyString, - ); + const isNewBooleanProp = name === 'inert'; + if (enableNewBooleanProps || !isNewBooleanProp) { + // Boolean + if (value && typeof value !== 'function' && typeof value !== 'symbol') { + target.push( + attributeSeparator, + stringToChunk(name), + attributeEmptyString, + ); + } + return; } - return; } + // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed. case 'capture': case 'download': { // Overloaded Boolean diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js index 8f8f9ae9f2580..cb7f47e9a7e77 100644 --- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js +++ b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js @@ -224,7 +224,6 @@ function validateProperty(tagName, name, value, eventRegistry) { case 'disableRemotePlayback': case 'formNoValidate': case 'hidden': - case enableNewBooleanProps ? 'inert' : 'formNoValidate': case 'loop': case 'noModule': case 'noValidate': @@ -242,6 +241,10 @@ function validateProperty(tagName, name, value, eventRegistry) { return true; } default: { + // TODO: Move into above cases once enableNewBooleanProps is removed. + if (enableNewBooleanProps && name === 'inert') { + return true; + } const prefix = name.toLowerCase().slice(0, 5); if (prefix === 'data-' || prefix === 'aria-') { return true; @@ -302,7 +305,6 @@ function validateProperty(tagName, name, value, eventRegistry) { case 'disableRemotePlayback': case 'formNoValidate': case 'hidden': - case enableNewBooleanProps ? 'inert' : 'formNoValidate': case 'loop': case 'noModule': case 'noValidate': @@ -316,6 +318,11 @@ function validateProperty(tagName, name, value, eventRegistry) { case 'itemScope': { break; } + case 'inert': + if (enableNewBooleanProps) { + break; + } + // eslint-disable-next-line no-fallthrough -- not flagged after DCE default: { return true; }