{"patch":"diff --git a\/fixtures\/attribute-behavior\/AttributeTableSnapshot.md b\/fixtures\/attribute-behavior\/AttributeTableSnapshot.md\nindex f3a8ebfde9..8db00f818f 100644\n--- a\/fixtures\/attribute-behavior\/AttributeTableSnapshot.md\n+++ b\/fixtures\/attribute-behavior\/AttributeTableSnapshot.md\n@@ -5427,20 +5427,20 @@\n | Test Case | Flags | Result |\n | --- | --- | --- |\n | `inert=(string)`| (changed)| `` |\n-| `inert=(empty string)`| (changed)| `` |\n+| `inert=(empty string)`| (initial, warning)| `` |\n | `inert=(array with string)`| (changed)| `` |\n | `inert=(empty array)`| (changed)| `` |\n | `inert=(object)`| (changed)| `` |\n | `inert=(numeric string)`| (changed)| `` |\n | `inert=(-1)`| (changed)| `` |\n-| `inert=(0)`| (changed)| `` |\n+| `inert=(0)`| (initial)| `` |\n | `inert=(integer)`| (changed)| `` |\n-| `inert=(NaN)`| (changed, warning)| `` |\n+| `inert=(NaN)`| (initial, warning)| `` |\n | `inert=(float)`| (changed)| `` |\n-| `inert=(true)`| (initial, warning)| `` |\n-| `inert=(false)`| (initial, warning)| `` |\n-| `inert=(string 'true')`| (changed)| `` |\n-| `inert=(string 'false')`| (changed)| `` |\n+| `inert=(true)`| (changed)| `` |\n+| `inert=(false)`| (initial)| `` |\n+| `inert=(string 'true')`| (changed, warning)| `` |\n+| `inert=(string 'false')`| (changed, warning)| `` |\n | `inert=(string 'on')`| (changed)| `` |\n | `inert=(string 'off')`| (changed)| `` |\n | `inert=(symbol)`| (initial, warning)| `` |\ndiff --git a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\nindex d54573bdff..bd071b4fd1 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\n@@ -73,6 +73,7 @@ import {\n disableIEWorkarounds,\n enableTrustedTypesIntegration,\n enableFilterEmptyStringAttributesDOM,\n+ enableNewBooleanProps,\n } from 'shared\/ReactFeatureFlags';\n import {\n mediaEventTypes,\n@@ -86,8 +87,10 @@ let didWarnFormActionType = false;\n let didWarnFormActionName = false;\n let didWarnFormActionTarget = false;\n let didWarnFormActionMethod = false;\n+let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};\n let canDiffStyleForHydrationWarning;\n if (__DEV__) {\n+ didWarnForNewBooleanPropsWithEmptyValue = {};\n \/\/ IE 11 parses & normalizes the style attribute as opposed to other\n \/\/ browsers. It adds spaces and sorts the properties in some\n \/\/ non-alphabetical order. Handling that would require sorting CSS\n@@ -712,6 +715,25 @@ function setProp(\n break;\n }\n \/\/ Boolean\n+ case 'inert':\n+ if (!enableNewBooleanProps) {\n+ setValueForAttribute(domElement, key, value);\n+ break;\n+ } else {\n+ if (__DEV__) {\n+ if (value === '' && !didWarnForNewBooleanPropsWithEmptyValue[key]) {\n+ didWarnForNewBooleanPropsWithEmptyValue[key] = true;\n+ console.error(\n+ 'Received an empty string for a boolean attribute `%s`. ' +\n+ 'This will treat the attribute as if it were false. ' +\n+ 'Either pass `false` to silence this warning, or ' +\n+ 'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',\n+ key,\n+ );\n+ }\n+ }\n+ }\n+ \/\/ fallthrough for new boolean props without the flag on\n case 'allowFullScreen':\n case 'async':\n case 'autoPlay':\n@@ -2663,6 +2685,33 @@ function diffHydratedGenericElement(\n extraAttributes,\n );\n continue;\n+ case 'inert':\n+ if (enableNewBooleanProps) {\n+ if (__DEV__) {\n+ if (\n+ value === '' &&\n+ !didWarnForNewBooleanPropsWithEmptyValue[propKey]\n+ ) {\n+ didWarnForNewBooleanPropsWithEmptyValue[propKey] = true;\n+ console.error(\n+ 'Received an empty string for a boolean attribute `%s`. ' +\n+ 'This will treat the attribute as if it were false. ' +\n+ 'Either pass `false` to silence this warning, or ' +\n+ 'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',\n+ propKey,\n+ );\n+ }\n+ }\n+ hydrateBooleanAttribute(\n+ domElement,\n+ propKey,\n+ propKey,\n+ value,\n+ extraAttributes,\n+ );\n+ continue;\n+ }\n+ \/\/ fallthrough for new boolean props without the flag on\n default: {\n if (\n \/\/ shouldIgnoreAttribute\ndiff --git a\/packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js b\/packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js\nindex 5902ece4d7..8b45146bea 100644\n--- a\/packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js\n+++ b\/packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js\n@@ -34,6 +34,7 @@ import {\n enableFloat,\n enableFormActions,\n enableFizzExternalRuntime,\n+ enableNewBooleanProps,\n } from 'shared\/ReactFeatureFlags';\n \n import type {\n@@ -345,6 +346,11 @@ const importMapScriptEnd = stringToPrecomputedChunk('<\/script>');\n \/\/ allow one more header to be captured which means in practice if the limit is approached it will be exceeded\n const DEFAULT_HEADERS_CAPACITY_IN_UTF16_CODE_UNITS = 2000;\n \n+let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};\n+if (__DEV__) {\n+ didWarnForNewBooleanPropsWithEmptyValue = {};\n+}\n+\n \/\/ Allows us to keep track of what we've already written so we can refer back to it.\n \/\/ if passed externalRuntimeConfig and the enableFizzExternalRuntime feature flag\n \/\/ is set, the server will send instructions via data attributes (instead of inline scripts)\n@@ -1398,6 +1404,32 @@ function pushAttribute(\n case 'xmlSpace':\n pushStringAttribute(target, 'xml:space', value);\n return;\n+ case 'inert': {\n+ if (enableNewBooleanProps) {\n+ if (__DEV__) {\n+ if (value === '' && !didWarnForNewBooleanPropsWithEmptyValue[name]) {\n+ didWarnForNewBooleanPropsWithEmptyValue[name] = true;\n+ console.error(\n+ 'Received an empty string for a boolean attribute `%s`. ' +\n+ 'This will treat the attribute as if it were false. ' +\n+ 'Either pass `false` to silence this warning, or ' +\n+ 'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',\n+ name,\n+ );\n+ }\n+ }\n+ \/\/ Boolean\n+ if (value && typeof value !== 'function' && typeof value !== 'symbol') {\n+ target.push(\n+ attributeSeparator,\n+ stringToChunk(name),\n+ attributeEmptyString,\n+ );\n+ }\n+ return;\n+ }\n+ }\n+ \/\/ fallthrough for new boolean props without the flag on\n default:\n if (\n \/\/ shouldIgnoreAttribute\ndiff --git a\/packages\/react-dom-bindings\/src\/shared\/ReactDOMUnknownPropertyHook.js b\/packages\/react-dom-bindings\/src\/shared\/ReactDOMUnknownPropertyHook.js\nindex 0648059695..29767d8a65 100644\n--- a\/packages\/react-dom-bindings\/src\/shared\/ReactDOMUnknownPropertyHook.js\n+++ b\/packages\/react-dom-bindings\/src\/shared\/ReactDOMUnknownPropertyHook.js\n@@ -12,6 +12,7 @@ import hasOwnProperty from 'shared\/hasOwnProperty';\n import {\n enableCustomElementPropertySupport,\n enableFormActions,\n+ enableNewBooleanProps,\n } from 'shared\/ReactFeatureFlags';\n \n const warnedProperties = {};\n@@ -240,6 +241,14 @@ function validateProperty(tagName, name, value, eventRegistry) {\n \/\/ Boolean properties can accept boolean values\n return true;\n }\n+ \/\/ fallthrough\n+ case 'inert': {\n+ if (enableNewBooleanProps) {\n+ \/\/ Boolean properties can accept boolean values\n+ return true;\n+ }\n+ }\n+ \/\/ fallthrough for new boolean props without the flag on\n default: {\n const prefix = name.toLowerCase().slice(0, 5);\n if (prefix === 'data-' || prefix === 'aria-') {\n@@ -314,6 +323,12 @@ function validateProperty(tagName, name, value, eventRegistry) {\n case 'itemScope': {\n break;\n }\n+ case 'inert': {\n+ if (enableNewBooleanProps) {\n+ break;\n+ }\n+ }\n+ \/\/ fallthrough for new boolean props without the flag on\n default: {\n return true;\n }\ndiff --git a\/packages\/react-dom-bindings\/src\/shared\/possibleStandardNames.js b\/packages\/react-dom-bindings\/src\/shared\/possibleStandardNames.js\nindex bd093192a3..d2d90877b5 100644\n--- a\/packages\/react-dom-bindings\/src\/shared\/possibleStandardNames.js\n+++ b\/packages\/react-dom-bindings\/src\/shared\/possibleStandardNames.js\n@@ -4,6 +4,7 @@\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\/\n+import {enableNewBooleanProps} from 'shared\/ReactFeatureFlags';\n \n \/\/ When adding attributes to the HTML or SVG allowed attribute list, be sure to\n \/\/ also add them to this module to ensure casing and incorrect name\n@@ -502,4 +503,8 @@ const possibleStandardNames = {\n zoomandpan: 'zoomAndPan',\n };\n \n+if (enableNewBooleanProps) {\n+ possibleStandardNames.inert = 'inert';\n+}\n+\n export default possibleStandardNames;\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js\nindex f6e82f25a5..402693c407 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js\n@@ -12,12 +12,14 @@\n describe('ReactDOM unknown attribute', () => {\n let React;\n let ReactDOMClient;\n+ let ReactFeatureFlags;\n let act;\n \n beforeEach(() => {\n jest.resetModules();\n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n act = require('internal-test-utils').act;\n });\n \n@@ -88,6 +90,54 @@ describe('ReactDOM unknown attribute', () => {\n expect(el.firstChild.hasAttribute('unknown')).toBe(false);\n });\n \n+ it('removes new boolean props', async () => {\n+ const el = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(el);\n+\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(

);\n+ });\n+ }).toErrorDev(\n+ ReactFeatureFlags.enableNewBooleanProps\n+ ? []\n+ : ['Warning: Received `true` for a non-boolean attribute `inert`.'],\n+ );\n+\n+ expect(el.firstChild.getAttribute('inert')).toBe(\n+ ReactFeatureFlags.enableNewBooleanProps ? '' : null,\n+ );\n+ });\n+\n+ it('warns once for empty strings in new boolean props', async () => {\n+ const el = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(el);\n+\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(

);\n+ });\n+ }).toErrorDev(\n+ ReactFeatureFlags.enableNewBooleanProps\n+ ? [\n+ 'Warning: Received an empty string for a boolean attribute `inert`. ' +\n+ 'This will treat the attribute as if it were false. ' +\n+ 'Either pass `false` to silence this warning, or ' +\n+ 'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',\n+ ]\n+ : [],\n+ );\n+\n+ expect(el.firstChild.getAttribute('inert')).toBe(\n+ ReactFeatureFlags.enableNewBooleanProps ? null : '',\n+ );\n+\n+ \/\/ The warning is only printed once.\n+ await act(() => {\n+ root.render(

);\n+ });\n+ });\n+\n it('passes through strings', async () => {\n await testUnknownAttributeAssignment('a string', 'a string');\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationAttributes-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationAttributes-test.js\nindex 0880f2c6b0..1613ef6699 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationAttributes-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationAttributes-test.js\n@@ -754,6 +754,41 @@ describe('ReactDOMServerIntegration', () => {\n }\n });\n \n+ itRenders('new boolean `true` attributes', async render => {\n+ const element = await render(\n+

,\n+ ReactFeatureFlags.enableNewBooleanProps ? 0 : 1,\n+ );\n+\n+ expect(element.getAttribute('inert')).toBe(\n+ ReactFeatureFlags.enableNewBooleanProps ? '' : null,\n+ );\n+ });\n+\n+ itRenders('new boolean `\"\"` attributes', async render => {\n+ const element = await render(\n+

,\n+ ReactFeatureFlags.enableNewBooleanProps\n+ ? \/\/ Warns since this used to render `inert=\"\"` like `inert={true}`\n+ \/\/ but now renders it like `inert={false}`.\n+ 1\n+ : 0,\n+ );\n+\n+ expect(element.getAttribute('inert')).toBe(\n+ ReactFeatureFlags.enableNewBooleanProps ? null : '',\n+ );\n+ });\n+\n+ itRenders('new boolean `false` attributes', async render => {\n+ const element = await render(\n+

,\n+ ReactFeatureFlags.enableNewBooleanProps ? 0 : 1,\n+ );\n+\n+ expect(element.getAttribute('inert')).toBe(null);\n+ });\n+\n itRenders(\n 'no unknown attributes for custom elements with null value',\n async render => {\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 3326b3bdc7..ff03d8849a 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -198,6 +198,13 @@ export const enableReactTestRendererWarning = false;\n \/\/ before removing them in stable in the next Major\n export const disableLegacyMode = __NEXT_MAJOR__;\n \n+\/\/ HTML boolean attributes need a special PropertyInfoRecord.\n+\/\/ Between support of these attributes in browsers and React supporting them as\n+\/\/ boolean props library users can use them as `

`.\n+\/\/ However, once React considers them as boolean props an empty string will\n+\/\/ result in false property i.e. break existing usage.\n+export const enableNewBooleanProps = __NEXT_MAJOR__;\n+\n \/\/ -----------------------------------------------------------------------------\n \/\/ Chopping Block\n \/\/\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex f56ad6f00e..93a8d66ce7 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -80,6 +80,7 @@ export const enableLegacyHidden = false;\n export const forceConcurrentByDefaultForTesting = false;\n export const allowConcurrentByDefault = false;\n export const enableCustomElementPropertySupport = true;\n+export const enableNewBooleanProps = true;\n \n export const enableTransitionTracing = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex b8da8afffb..acc051edcc 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -63,6 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;\n export const enableUnifiedSyncLane = true;\n export const allowConcurrentByDefault = false;\n export const enableCustomElementPropertySupport = true;\n+export const enableNewBooleanProps = true;\n \n export const consoleManagedByDevToolsDuringStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex 0905df2955..366e475a4f 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -99,6 +99,7 @@ export const enableReactTestRendererWarning = false;\n export const enableBigIntSupport = __NEXT_MAJOR__;\n export const disableLegacyMode = __NEXT_MAJOR__;\n export const disableLegacyContext = __NEXT_MAJOR__;\n+export const enableNewBooleanProps = __NEXT_MAJOR__;\n \n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\nindex f7673e51cf..fd95313859 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n@@ -63,6 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;\n export const enableUnifiedSyncLane = true;\n export const allowConcurrentByDefault = true;\n export const enableCustomElementPropertySupport = true;\n+export const enableNewBooleanProps = true;\n \n export const consoleManagedByDevToolsDuringStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex d8b43417dd..f6b6be8054 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -63,6 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;\n export const enableUnifiedSyncLane = true;\n export const allowConcurrentByDefault = true;\n export const enableCustomElementPropertySupport = false;\n+export const enableNewBooleanProps = false;\n \n export const consoleManagedByDevToolsDuringStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex b51aa5b7ec..d2364057ec 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -102,6 +102,8 @@ export const allowConcurrentByDefault = true;\n \n export const consoleManagedByDevToolsDuringStrictMode = true;\n \n+export const enableNewBooleanProps = false;\n+\n export const enableFizzExternalRuntime = true;\n \n export const forceConcurrentByDefaultForTesting = false;\n","body":"","parents":["bb0944fe5bdd619be918621a9a1647204d6e7ce1"],"files":[{"path":"fixtures\/attribute-behavior\/AttributeTableSnapshot.md","status":"M"},{"path":"packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js","status":"M"},{"path":"packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js","status":"M"},{"path":"packages\/react-dom-bindings\/src\/shared\/ReactDOMUnknownPropertyHook.js","status":"M"},{"path":"packages\/react-dom-bindings\/src\/shared\/possibleStandardNames.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMAttribute-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationAttributes-test.js","status":"M"},{"path":"packages\/shared\/ReactFeatureFlags.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.native-fb.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.native-oss.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.www.js","status":"M"}],"commit":{"authorName":"Sebastian Silbermann","shortRevision":"bbc571aee4","subject":"React DOM: Support boolean values for `inert` prop (#24730)","authoredAt":"2024-03-13T23:10:41+01:00","authorEmail":"silbermann.sebastian@gmail.com","revision":"bbc571aee431d44799ae6a70832ea834325a5af9"}}

dillon1000/react

Files changed