React DOM: Support boolean values for inert prop (#24730)

fixtures/attribute-behavior/AttributeTableSnapshot.md

@@ -5427,20 +5427,20 @@
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `inert=(string)`| (changed)| `<boolean: true>` |
-| `inert=(empty string)`| (changed)| `<boolean: true>` |
+| `inert=(empty string)`| (initial, warning)| `<boolean: false>` |
 | `inert=(array with string)`| (changed)| `<boolean: true>` |
 | `inert=(empty array)`| (changed)| `<boolean: true>` |
 | `inert=(object)`| (changed)| `<boolean: true>` |
 | `inert=(numeric string)`| (changed)| `<boolean: true>` |
 | `inert=(-1)`| (changed)| `<boolean: true>` |
-| `inert=(0)`| (changed)| `<boolean: true>` |
+| `inert=(0)`| (initial)| `<boolean: false>` |
 | `inert=(integer)`| (changed)| `<boolean: true>` |
-| `inert=(NaN)`| (changed, warning)| `<boolean: true>` |
+| `inert=(NaN)`| (initial, warning)| `<boolean: false>` |
 | `inert=(float)`| (changed)| `<boolean: true>` |
-| `inert=(true)`| (initial, warning)| `<boolean: false>` |
-| `inert=(false)`| (initial, warning)| `<boolean: false>` |
-| `inert=(string 'true')`| (changed)| `<boolean: true>` |
-| `inert=(string 'false')`| (changed)| `<boolean: true>` |
+| `inert=(true)`| (changed)| `<boolean: true>` |
+| `inert=(false)`| (initial)| `<boolean: false>` |
+| `inert=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `inert=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `inert=(string 'on')`| (changed)| `<boolean: true>` |
 | `inert=(string 'off')`| (changed)| `<boolean: true>` |
 | `inert=(symbol)`| (initial, warning)| `<boolean: false>` |

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -73,6 +73,7 @@ import {
   disableIEWorkarounds,
   enableTrustedTypesIntegration,
   enableFilterEmptyStringAttributesDOM,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -86,8 +87,10 @@ let didWarnFormActionType = false;
 let didWarnFormActionName = false;
 let didWarnFormActionTarget = false;
 let didWarnFormActionMethod = false;
+let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};
 let canDiffStyleForHydrationWarning;
 if (__DEV__) {
+  didWarnForNewBooleanPropsWithEmptyValue = {};
   // IE 11 parses & normalizes the style attribute as opposed to other
   // browsers. It adds spaces and sorts the properties in some
   // non-alphabetical order. Handling that would require sorting CSS
@@ -712,6 +715,25 @@ function setProp(
       break;
     }
     // Boolean
+    case 'inert':
+      if (!enableNewBooleanProps) {
+        setValueForAttribute(domElement, key, value);
+        break;
+      } else {
+        if (__DEV__) {
+          if (value === '' && !didWarnForNewBooleanPropsWithEmptyValue[key]) {
+            didWarnForNewBooleanPropsWithEmptyValue[key] = true;
+            console.error(
+              'Received an empty string for a boolean attribute `%s`. ' +
+                'This will treat the attribute as if it were false. ' +
+                'Either pass `false` to silence this warning, or ' +
+                'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+              key,
+            );
+          }
+        }
+      }
+    // fallthrough for new boolean props without the flag on
     case 'allowFullScreen':
     case 'async':
     case 'autoPlay':
@@ -2663,6 +2685,33 @@ function diffHydratedGenericElement(
           extraAttributes,
         );
         continue;
+      case 'inert':
+        if (enableNewBooleanProps) {
+          if (__DEV__) {
+            if (
+              value === '' &&
+              !didWarnForNewBooleanPropsWithEmptyValue[propKey]
+            ) {
+              didWarnForNewBooleanPropsWithEmptyValue[propKey] = true;
+              console.error(
+                'Received an empty string for a boolean attribute `%s`. ' +
+                  'This will treat the attribute as if it were false. ' +
+                  'Either pass `false` to silence this warning, or ' +
+                  'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+                propKey,
+              );
+            }
+          }
+          hydrateBooleanAttribute(
+            domElement,
+            propKey,
+            propKey,
+            value,
+            extraAttributes,
+          );
+          continue;
+        }
+      // fallthrough for new boolean props without the flag on
       default: {
         if (
           // shouldIgnoreAttribute

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -34,6 +34,7 @@ import {
   enableFloat,
   enableFormActions,
   enableFizzExternalRuntime,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 
 import type {
@@ -345,6 +346,11 @@ const importMapScriptEnd = stringToPrecomputedChunk('</script>');
 // allow one more header to be captured which means in practice if the limit is approached it will be exceeded
 const DEFAULT_HEADERS_CAPACITY_IN_UTF16_CODE_UNITS = 2000;
 
+let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};
+if (__DEV__) {
+  didWarnForNewBooleanPropsWithEmptyValue = {};
+}
+
 // Allows us to keep track of what we've already written so we can refer back to it.
 // if passed externalRuntimeConfig and the enableFizzExternalRuntime feature flag
 // is set, the server will send instructions via data attributes (instead of inline scripts)
@@ -1398,6 +1404,32 @@ function pushAttribute(
     case 'xmlSpace':
       pushStringAttribute(target, 'xml:space', value);
       return;
+    case 'inert': {
+      if (enableNewBooleanProps) {
+        if (__DEV__) {
+          if (value === '' && !didWarnForNewBooleanPropsWithEmptyValue[name]) {
+            didWarnForNewBooleanPropsWithEmptyValue[name] = true;
+            console.error(
+              'Received an empty string for a boolean attribute `%s`. ' +
+                'This will treat the attribute as if it were false. ' +
+                'Either pass `false` to silence this warning, or ' +
+                'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+              name,
+            );
+          }
+        }
+        // Boolean
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          target.push(
+            attributeSeparator,
+            stringToChunk(name),
+            attributeEmptyString,
+          );
+        }
+        return;
+      }
+    }
+    // fallthrough for new boolean props without the flag on
     default:
       if (
         // shouldIgnoreAttribute

packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js

@@ -12,6 +12,7 @@ import hasOwnProperty from 'shared/hasOwnProperty';
 import {
   enableCustomElementPropertySupport,
   enableFormActions,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 
 const warnedProperties = {};
@@ -240,6 +241,14 @@ function validateProperty(tagName, name, value, eventRegistry) {
             // Boolean properties can accept boolean values
             return true;
           }
+          // fallthrough
+          case 'inert': {
+            if (enableNewBooleanProps) {
+              // Boolean properties can accept boolean values
+              return true;
+            }
+          }
+          // fallthrough for new boolean props without the flag on
           default: {
             const prefix = name.toLowerCase().slice(0, 5);
             if (prefix === 'data-' || prefix === 'aria-') {
@@ -314,6 +323,12 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'itemScope': {
               break;
             }
+            case 'inert': {
+              if (enableNewBooleanProps) {
+                break;
+              }
+            }
+            // fallthrough for new boolean props without the flag on
             default: {
               return true;
             }

packages/react-dom-bindings/src/shared/possibleStandardNames.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import {enableNewBooleanProps} from 'shared/ReactFeatureFlags';
 
 // When adding attributes to the HTML or SVG allowed attribute list, be sure to
 // also add them to this module to ensure casing and incorrect name
@@ -502,4 +503,8 @@ const possibleStandardNames = {
   zoomandpan: 'zoomAndPan',
 };
 
+if (enableNewBooleanProps) {
+  possibleStandardNames.inert = 'inert';
+}
+
 export default possibleStandardNames;

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -12,12 +12,14 @@
 describe('ReactDOM unknown attribute', () => {
   let React;
   let ReactDOMClient;
+  let ReactFeatureFlags;
   let act;
 
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
     ReactDOMClient = require('react-dom/client');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
     act = require('internal-test-utils').act;
   });
 
@@ -88,6 +90,54 @@ describe('ReactDOM unknown attribute', () => {
       expect(el.firstChild.hasAttribute('unknown')).toBe(false);
     });
 
+    it('removes new boolean props', async () => {
+      const el = document.createElement('div');
+      const root = ReactDOMClient.createRoot(el);
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<div inert={true} />);
+        });
+      }).toErrorDev(
+        ReactFeatureFlags.enableNewBooleanProps
+          ? []
+          : ['Warning: Received `true` for a non-boolean attribute `inert`.'],
+      );
+
+      expect(el.firstChild.getAttribute('inert')).toBe(
+        ReactFeatureFlags.enableNewBooleanProps ? '' : null,
+      );
+    });
+
+    it('warns once for empty strings in new boolean props', async () => {
+      const el = document.createElement('div');
+      const root = ReactDOMClient.createRoot(el);
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<div inert="" />);
+        });
+      }).toErrorDev(
+        ReactFeatureFlags.enableNewBooleanProps
+          ? [
+              'Warning: Received an empty string for a boolean attribute `inert`. ' +
+                'This will treat the attribute as if it were false. ' +
+                'Either pass `false` to silence this warning, or ' +
+                'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+            ]
+          : [],
+      );
+
+      expect(el.firstChild.getAttribute('inert')).toBe(
+        ReactFeatureFlags.enableNewBooleanProps ? null : '',
+      );
+
+      // The warning is only printed once.
+      await act(() => {
+        root.render(<div inert="" />);
+      });
+    });
+
     it('passes through strings', async () => {
       await testUnknownAttributeAssignment('a string', 'a string');
     });

packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js

@@ -754,6 +754,41 @@ describe('ReactDOMServerIntegration', () => {
       }
     });
 
+    itRenders('new boolean `true` attributes', async render => {
+      const element = await render(
+        <div inert={true} />,
+        ReactFeatureFlags.enableNewBooleanProps ? 0 : 1,
+      );
+
+      expect(element.getAttribute('inert')).toBe(
+        ReactFeatureFlags.enableNewBooleanProps ? '' : null,
+      );
+    });
+
+    itRenders('new boolean `""` attributes', async render => {
+      const element = await render(
+        <div inert="" />,
+        ReactFeatureFlags.enableNewBooleanProps
+          ? // Warns since this used to render `inert=""` like `inert={true}`
+            // but now renders it like `inert={false}`.
+            1
+          : 0,
+      );
+
+      expect(element.getAttribute('inert')).toBe(
+        ReactFeatureFlags.enableNewBooleanProps ? null : '',
+      );
+    });
+
+    itRenders('new boolean `false` attributes', async render => {
+      const element = await render(
+        <div inert={false} />,
+        ReactFeatureFlags.enableNewBooleanProps ? 0 : 1,
+      );
+
+      expect(element.getAttribute('inert')).toBe(null);
+    });
+
     itRenders(
       'no unknown attributes for custom elements with null value',
       async render => {

packages/shared/ReactFeatureFlags.js

@@ -198,6 +198,13 @@ export const enableReactTestRendererWarning = false;
 // before removing them in stable in the next Major
 export const disableLegacyMode = __NEXT_MAJOR__;
 
+// HTML boolean attributes need a special PropertyInfoRecord.
+// Between support of these attributes in browsers and React supporting them as
+// boolean props library users can use them as `<div someBooleanAttribute="" />`.
+// However, once React considers them as boolean props an empty string will
+// result in false property i.e. break existing usage.
+export const enableNewBooleanProps = __NEXT_MAJOR__;
+
 // -----------------------------------------------------------------------------
 // Chopping Block
 //

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -80,6 +80,7 @@ export const enableLegacyHidden = false;
 export const forceConcurrentByDefaultForTesting = false;
 export const allowConcurrentByDefault = false;
 export const enableCustomElementPropertySupport = true;
+export const enableNewBooleanProps = true;
 
 export const enableTransitionTracing = false;
 

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -63,6 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = false;
 export const enableCustomElementPropertySupport = true;
+export const enableNewBooleanProps = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -99,6 +99,7 @@ export const enableReactTestRendererWarning = false;
 export const enableBigIntSupport = __NEXT_MAJOR__;
 export const disableLegacyMode = __NEXT_MAJOR__;
 export const disableLegacyContext = __NEXT_MAJOR__;
+export const enableNewBooleanProps = __NEXT_MAJOR__;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.test-renderer.native.js

@@ -63,6 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = true;
 export const enableCustomElementPropertySupport = true;
+export const enableNewBooleanProps = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -63,6 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = true;
 export const enableCustomElementPropertySupport = false;
+export const enableNewBooleanProps = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 

packages/shared/forks/ReactFeatureFlags.www.js

@@ -102,6 +102,8 @@ export const allowConcurrentByDefault = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
+export const enableNewBooleanProps = false;
+
 export const enableFizzExternalRuntime = true;
 
 export const forceConcurrentByDefaultForTesting = false;