Skip to content

React 19: patch to support legacy inert attribute values#79475

Open
jsnajdr wants to merge 2 commits into
trunkfrom
patch/react-19-inert
Open

React 19: patch to support legacy inert attribute values#79475
jsnajdr wants to merge 2 commits into
trunkfrom
patch/react-19-inert

Conversation

@jsnajdr

@jsnajdr jsnajdr commented Jun 24, 2026

Copy link
Copy Markdown
Member

This is another patch we're applying to React 19 to improve compat with React 18. When faced with a <div inert=""> element, both versions treat it differently. React 18 sets the empty string value as-is as the DOM attribute value. And in DOM, any value, even '', means "true". React 19, however, converts the empty string to boolean, and because empty string is falsy, the result is "false".

We're applying a patch that interprets the '' value universally as true. In react-dom there is code:

case 'inert': {
  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 boolean props that don't have a warning for empty strings.

which issues a warning in dev mode for this tricky case, but otherwise does nothing. Our patch adds this statement at the end of the case statement:

if ( "string" === typeof value ) value = true;

And that coerces the string value to true.

I adapted the e2e tests that checks for these incompatibilities: the previous check for inert wasn't catching the problematic case.

The PR also does a refactoring of the patching code, as it has grown somewhat since it was initially written.

@jsnajdr jsnajdr requested review from Mamaduka, aduth and simison June 24, 2026 08:26
@jsnajdr jsnajdr self-assigned this Jun 24, 2026
@jsnajdr jsnajdr added the [Type] Plugin Interoperability Incompatibilities between a specific plugin and the block editor. Close with workaround notes. label Jun 24, 2026
@jsnajdr jsnajdr requested a review from manzoorwanijk as a code owner June 24, 2026 08:26
@jsnajdr jsnajdr added the Backwards Compatibility Issues or PRs that impact backwards compatability label Jun 24, 2026
@github-actions

Copy link
Copy Markdown

Size Change: +25 B (0%)

Total Size: 7.51 MB

📦 View Changed
Filename Size Change
build/scripts/vendors/react-dom-19.min.js 58.5 kB +25 B (+0.04%)

compressed-size-action

@jsnajdr

jsnajdr commented Jun 24, 2026

Copy link
Copy Markdown
Member Author

By the way, this patch again corresponds to a feature flag that used to be there during the React 18 -> 19 transition. It was called enableNewBooleanProps and was cleaned up in react/react#28676.

@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions

Copy link
Copy Markdown

Flaky tests detected in ff4c586.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/28085515159
📝 Reported issues:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Backwards Compatibility Issues or PRs that impact backwards compatability [Type] Plugin Interoperability Incompatibilities between a specific plugin and the block editor. Close with workaround notes.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant