[DOM] Blur focused descendants in Fragment refs - #37125
Conversation
|
Comparing: b685b40...408004c Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
daltino
left a comment
There was a problem hiding this comment.
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
left a comment
There was a problem hiding this comment.
I agree this makes sense here and is now more consistent with focus. Thanks for contributing!
## 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)
## 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)
## 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)
## 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)
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().
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)
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)
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 butblur()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 prettieryarn lincyarn flow dom-node