Skip to content

Allow fragment refs to attempt focus/focusLast on nested host children #33058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Allow fragment refs to attempt focus/focusLast on nested host children #33058

wants to merge 1 commit into from

Conversation

jackpope
Copy link
Contributor

This enables focus and focusLast methods on FragmentInstances to search nested host components, depth first. Attempts focus on each child and bails if one is successful. Previously, only the first level of host children would attempt focus.

Now if we have an example like

component MenuItem() {
  return (<div><a>{...}</a></div>)
}

component Menu() {
  return <Fragment>{items.map(i => <MenuItem i={i} />)}</Fragment>
}

We can target focus on the first or last a tag, rather than checking each wrapping div and then noop.

@jackpope jackpope requested a review from sebmarkbage April 29, 2025 20:06
@jackpope jackpope requested a review from rickhanlonii April 29, 2025 20:06
@jackpope jackpope force-pushed the fragment-refs-deep-focus branch from fe51ced to 4958839 Compare April 29, 2025 21:06
@react-sizebot
Copy link

react-sizebot commented Apr 29, 2025 •
edited
Loading

Comparing: 49ea8bf...bc5f128

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 = 6.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 527.81 kB 527.81 kB = 93.08 kB 93.08 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js +0.04% 633.44 kB 633.70 kB +0.08% 111.27 kB 111.35 kB
facebook-www/ReactDOM-prod.classic.js +0.04% 671.22 kB 671.48 kB +0.07% 117.71 kB 117.79 kB
facebook-www/ReactDOM-prod.modern.js +0.04% 661.50 kB 661.76 kB +0.07% 116.15 kB 116.23 kB
oss-experimental/react-reconciler/cjs/react-reconciler-reflection.development.js +6.51% 7.22 kB 7.69 kB +4.79% 1.69 kB 1.77 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler-reflection.development.js +6.51% 7.22 kB 7.69 kB +4.79% 1.69 kB 1.77 kB
oss-stable/react-reconciler/cjs/react-reconciler-reflection.development.js +6.51% 7.22 kB 7.69 kB +4.79% 1.69 kB 1.77 kB
oss-experimental/react-reconciler/cjs/react-reconciler-reflection.production.js +5.42% 6.54 kB 6.89 kB +3.86% 1.69 kB 1.75 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler-reflection.production.js +5.42% 6.54 kB 6.89 kB +3.86% 1.69 kB 1.75 kB
oss-stable/react-reconciler/cjs/react-reconciler-reflection.production.js +5.42% 6.54 kB 6.89 kB +3.86% 1.69 kB 1.75 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-reconciler/cjs/react-reconciler-reflection.development.js +6.51% 7.22 kB 7.69 kB +4.79% 1.69 kB 1.77 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler-reflection.development.js +6.51% 7.22 kB 7.69 kB +4.79% 1.69 kB 1.77 kB
oss-stable/react-reconciler/cjs/react-reconciler-reflection.development.js +6.51% 7.22 kB 7.69 kB +4.79% 1.69 kB 1.77 kB
oss-experimental/react-reconciler/cjs/react-reconciler-reflection.production.js +5.42% 6.54 kB 6.89 kB +3.86% 1.69 kB 1.75 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler-reflection.production.js +5.42% 6.54 kB 6.89 kB +3.86% 1.69 kB 1.75 kB
oss-stable/react-reconciler/cjs/react-reconciler-reflection.production.js +5.42% 6.54 kB 6.89 kB +3.86% 1.69 kB 1.75 kB
oss-experimental/react-dom/unstable_server-external-runtime.js +0.88% 8.72 kB 8.80 kB +1.07% 2.25 kB 2.28 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js = 97.15 kB 96.90 kB = 19.94 kB 19.91 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js = 97.15 kB 96.90 kB = 19.94 kB 19.91 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js = 97.09 kB 96.85 kB = 19.93 kB 19.90 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js = 97.09 kB 96.85 kB = 19.93 kB 19.90 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js = 96.09 kB 95.85 kB = 19.72 kB 19.69 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js = 96.09 kB 95.85 kB = 19.72 kB 19.69 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js = 95.03 kB 94.79 kB = 19.47 kB 19.44 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js = 95.03 kB 94.79 kB = 19.47 kB 19.44 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js = 95.01 kB 94.77 kB = 19.48 kB 19.45 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js = 95.01 kB 94.77 kB = 19.48 kB 19.45 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js = 93.99 kB 93.74 kB = 19.25 kB 19.22 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js = 93.99 kB 93.74 kB = 19.25 kB 19.22 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js = 93.57 kB 93.33 kB = 19.14 kB 19.11 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js = 93.57 kB 93.33 kB = 19.14 kB 19.11 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.js = 90.15 kB 89.91 kB = 18.79 kB 18.75 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.js = 90.15 kB 89.91 kB = 18.79 kB 18.75 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js = 90.12 kB 89.88 kB = 18.78 kB 18.74 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js = 90.12 kB 89.88 kB = 18.78 kB 18.74 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.js = 88.10 kB 87.86 kB = 18.35 kB 18.33 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.js = 88.10 kB 87.86 kB = 18.35 kB 18.33 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js = 86.66 kB 86.41 kB = 18.04 kB 18.01 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js = 86.66 kB 86.41 kB = 18.04 kB 18.01 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js = 101.70 kB 101.42 kB = 20.76 kB 20.72 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 159.59 kB 159.14 kB = 29.61 kB 29.49 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js = 101.65 kB 101.36 kB +0.04% 20.70 kB 20.71 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js = 159.53 kB 159.08 kB = 29.59 kB 29.48 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js = 159.23 kB 158.78 kB = 29.35 kB 29.24 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 159.20 kB 158.75 kB = 29.36 kB 29.25 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 158.39 kB 157.94 kB = 29.31 kB 29.19 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js = 100.65 kB 100.36 kB = 20.48 kB 20.43 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js = 99.72 kB 99.43 kB = 20.34 kB 20.29 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js = 99.70 kB 99.41 kB = 20.35 kB 20.30 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 155.27 kB 154.82 kB = 28.74 kB 28.63 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js = 98.59 kB 98.30 kB = 20.08 kB 20.03 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js = 154.73 kB 154.28 kB = 28.61 kB 28.49 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js = 98.17 kB 97.88 kB = 19.92 kB 19.88 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js = 151.72 kB 151.27 kB = 28.24 kB 28.11 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js = 151.69 kB 151.24 kB = 28.23 kB 28.10 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js = 151.45 kB 151.00 kB = 27.98 kB 27.87 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.js = 94.71 kB 94.42 kB = 19.55 kB 19.51 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js = 94.68 kB 94.39 kB = 19.53 kB 19.49 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js = 146.99 kB 146.54 kB = 27.25 kB 27.14 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.js = 92.78 kB 92.50 kB = 19.13 kB 19.08 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js = 91.26 kB 90.97 kB = 18.80 kB 18.75 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 152.45 kB 151.91 kB = 28.30 kB 28.13 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 152.45 kB 151.91 kB = 28.30 kB 28.13 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js = 152.39 kB 151.84 kB = 28.28 kB 28.12 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js = 152.39 kB 151.84 kB = 28.28 kB 28.12 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js = 151.75 kB 151.20 kB = 28.00 kB 27.87 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js = 151.75 kB 151.20 kB = 28.00 kB 27.87 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 151.72 kB 151.18 kB = 28.01 kB 27.88 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 151.72 kB 151.18 kB = 28.01 kB 27.88 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 151.25 kB 150.70 kB = 28.01 kB 27.86 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 151.25 kB 150.70 kB = 28.01 kB 27.86 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 148.43 kB 147.88 kB = 27.51 kB 27.38 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 148.43 kB 147.88 kB = 27.51 kB 27.38 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js = 147.89 kB 147.34 kB = 27.38 kB 27.25 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js = 147.89 kB 147.34 kB = 27.38 kB 27.25 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js = 144.58 kB 144.03 kB = 26.94 kB 26.80 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js = 144.58 kB 144.03 kB = 26.94 kB 26.80 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js = 144.56 kB 144.01 kB = 26.97 kB 26.83 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js = 144.56 kB 144.01 kB = 26.97 kB 26.83 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js = 143.97 kB 143.43 kB = 26.69 kB 26.56 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js = 143.97 kB 143.43 kB = 26.69 kB 26.56 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js = 140.15 kB 139.60 kB = 26.07 kB 25.94 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js = 140.15 kB 139.60 kB = 26.07 kB 25.94 kB
oss-experimental/react-server/cjs/react-server-flight.development.js = 108.09 kB 107.64 kB = 20.04 kB 19.94 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.js = 58.24 kB 57.95 kB = 11.68 kB 11.65 kB
oss-stable/react-server/cjs/react-server-flight.production.js = 58.24 kB 57.95 kB = 11.68 kB 11.65 kB
oss-experimental/react-server/cjs/react-server-flight.production.js = 63.24 kB 62.91 kB = 12.56 kB 12.52 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js = 101.26 kB 100.72 kB = 18.84 kB 18.71 kB
oss-stable/react-server/cjs/react-server-flight.development.js = 101.26 kB 100.72 kB = 18.84 kB 18.71 kB

Generated by 🚫 dangerJS against bc5f128

@jackpope jackpope force-pushed the fragment-refs-deep-focus branch from 4958839 to bc5f128 Compare April 30, 2025 19:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sebmarkbage sebmarkbage Awaiting requested review from sebmarkbage

@rickhanlonii rickhanlonii Awaiting requested review from rickhanlonii

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@jackpope @react-sizebot @facebook-github-bot