Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[DOM] Blur focused descendants in Fragment refs - #37125

Merged
jackpope merged 1 commit into
react:mainfrom
fallintoplace:fix-fragment-ref-nested-blur
Jul 29, 2026
Merged

[DOM] Blur focused descendants in Fragment refs#37125
jackpope merged 1 commit into
react:mainfrom
fallintoplace:fix-fragment-ref-nested-blur

Conversation

@fallintoplace

Copy link
Copy Markdown
Contributor

Summary

FragmentInstance.blur() only matched the active element against the first level of host children. If the focused element was nested inside one of those children, focus() could reach it but blur() would leave it focused.

This treats an active element contained by a Fragment host child as part of the Fragment and blurs the active element itself. It also adds regression coverage for a nested input.

Fixes #37124.

How did you test this change?

  • yarn test ReactDOMFragmentRefs-test --runInBand (65 tests passed)
  • yarn test --prod ReactDOMFragmentRefs-test --runInBand (65 tests passed)
  • yarn prettier
  • yarn linc
  • yarn flow dom-node

@meta-cla meta-cla Bot added the CLA Signed label Jul 25, 2026
@react-sizebot

Copy link
Copy Markdown

Comparing: b685b40...408004c

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 7.19 kB 7.19 kB = 1.91 kB 1.91 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 615.77 kB 615.82 kB = 109.00 kB 109.00 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 7.19 kB 7.19 kB = 1.91 kB 1.91 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 686.96 kB 687.00 kB = 120.48 kB 120.49 kB
facebook-www/ReactDOM-prod.classic.js = 706.84 kB 706.89 kB +0.03% 123.91 kB 123.94 kB
facebook-www/ReactDOM-prod.modern.js = 697.16 kB 697.21 kB +0.03% 122.30 kB 122.33 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 408004c

@daltino daltino left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PR patches blurActiveElementWithinFragment to ensure it properly handles active elements nested within fragment refs by switching from instance.blur() to activeElement.blur(). It also introduces a test to validate that focus is removed correctly in this scenario. The changes are concise, align with the contribution guidelines, and add essential test coverage.

@jackpope jackpope left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree this makes sense here and is now more consistent with focus. Thanks for contributing!

@jackpope
jackpope merged commit 1724e9c into react:main Jul 29, 2026
244 checks passed
github-actions Bot pushed a commit that referenced this pull request Jul 29, 2026
## Summary

`FragmentInstance.blur()` only matched the active element against the
first level of host children. If the focused element was nested inside
one of those children, `focus()` could reach it but `blur()` would leave
it focused.

This treats an active element contained by a Fragment host child as part
of the Fragment and blurs the active element itself. It also adds
regression coverage for a nested input.

Fixes #37124.

## How did you test this change?

- `yarn test ReactDOMFragmentRefs-test --runInBand` (65 tests passed)
- `yarn test --prod ReactDOMFragmentRefs-test --runInBand` (65 tests
passed)
- `yarn prettier`
- `yarn linc`
- `yarn flow dom-node`

DiffTrain build for [1724e9c](1724e9c)
github-actions Bot pushed a commit that referenced this pull request Jul 29, 2026
## Summary

`FragmentInstance.blur()` only matched the active element against the
first level of host children. If the focused element was nested inside
one of those children, `focus()` could reach it but `blur()` would leave
it focused.

This treats an active element contained by a Fragment host child as part
of the Fragment and blurs the active element itself. It also adds
regression coverage for a nested input.

Fixes #37124.

## How did you test this change?

- `yarn test ReactDOMFragmentRefs-test --runInBand` (65 tests passed)
- `yarn test --prod ReactDOMFragmentRefs-test --runInBand` (65 tests
passed)
- `yarn prettier`
- `yarn linc`
- `yarn flow dom-node`

DiffTrain build for [1724e9c](1724e9c)
github-actions Bot pushed a commit to code/lib-react that referenced this pull request Jul 30, 2026
## Summary

`FragmentInstance.blur()` only matched the active element against the
first level of host children. If the focused element was nested inside
one of those children, `focus()` could reach it but `blur()` would leave
it focused.

This treats an active element contained by a Fragment host child as part
of the Fragment and blurs the active element itself. It also adds
regression coverage for a nested input.

Fixes react#37124.

## How did you test this change?

- `yarn test ReactDOMFragmentRefs-test --runInBand` (65 tests passed)
- `yarn test --prod ReactDOMFragmentRefs-test --runInBand` (65 tests
passed)
- `yarn prettier`
- `yarn linc`
- `yarn flow dom-node`

DiffTrain build for [1724e9c](react@1724e9c)
github-actions Bot pushed a commit to code/lib-react that referenced this pull request Jul 30, 2026
## Summary

`FragmentInstance.blur()` only matched the active element against the
first level of host children. If the focused element was nested inside
one of those children, `focus()` could reach it but `blur()` would leave
it focused.

This treats an active element contained by a Fragment host child as part
of the Fragment and blurs the active element itself. It also adds
regression coverage for a nested input.

Fixes react#37124.

## How did you test this change?

- `yarn test ReactDOMFragmentRefs-test --runInBand` (65 tests passed)
- `yarn test --prod ReactDOMFragmentRefs-test --runInBand` (65 tests
passed)
- `yarn prettier`
- `yarn linc`
- `yarn flow dom-node`

DiffTrain build for [1724e9c](react@1724e9c)
jackpope added a commit that referenced this pull request Aug 12, 2026
focus() passes through portals as it attempts focus down the fiber tree.
blur() exited early based on a containment check, causing it to stop at
portals.

The result could be a focused element that cannot be blurred.

Follow up to #37125, which made
blur() apply recursively to be consistent with focus().
github-actions Bot pushed a commit that referenced this pull request Aug 12, 2026
focus() passes through portals as it attempts focus down the fiber tree.
blur() exited early based on a containment check, causing it to stop at
portals.

The result could be a focused element that cannot be blurred.

Follow up to #37125, which made
blur() apply recursively to be consistent with focus().

DiffTrain build for [278d318](278d318)
github-actions Bot pushed a commit that referenced this pull request Aug 12, 2026
focus() passes through portals as it attempts focus down the fiber tree.
blur() exited early based on a containment check, causing it to stop at
portals.

The result could be a focused element that cannot be blurred.

Follow up to #37125, which made
blur() apply recursively to be consistent with focus().

DiffTrain build for [278d318](278d318)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: Fragment ref blur() does not blur nested focused elements

4 participants