Title: Define focus restoration for controlled dialogs · Issue #1209 · TanStack/tanstack.com · GitHub
Open Graph Title: Define focus restoration for controlled dialogs · Issue #1209 · TanStack/tanstack.com
X Title: Define focus restoration for controlled dialogs · Issue #1209 · TanStack/tanstack.com
Description: Evidence Merged PR #1205 moved shipping overlays onto the shared Radix-backed Dialog, but the controlled-dialog call sites do not register an opener with DialogTrigger. Current source has 16 controlled Dialog roots and no shipping Dialog...
Open Graph Description: Evidence Merged PR #1205 moved shipping overlays onto the shared Radix-backed Dialog, but the controlled-dialog call sites do not register an opener with DialogTrigger. Current source has 16 contro...
X Description: Evidence Merged PR #1205 moved shipping overlays onto the shared Radix-backed Dialog, but the controlled-dialog call sites do not register an opener with DialogTrigger. Current source has 16 contro...
Opengraph URL: https://github.com/TanStack/tanstack.com/issues/1209
X: @github
Domain: github.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Define focus restoration for controlled dialogs","articleBody":"## Evidence\n\nMerged PR #1205 moved shipping overlays onto the shared Radix-backed `Dialog`, but the controlled-dialog call sites do not register an opener with `DialogTrigger`.\n\nCurrent source has 16 controlled `Dialog` roots and no shipping `DialogTrigger` usage. Radix stores the trigger in `context.triggerRef`, then its modal `onCloseAutoFocus` handler prevents the browser default and calls `context.triggerRef.current?.focus()`. Without a registered trigger, that ref is null, so keyboard focus is not restored to the control that opened the dialog.\n\nThis is straightforward for colocated single openers, such as the NPM baseline package picker. It is not one mechanical change for every caller:\n\n- Some dialogs are controlled by an opener in a parent component.\n- The admin role removal dialog has one dynamic opener per table row.\n- Some design-system examples currently keep their opener outside the `Dialog` root.\n\nRepeated title, body, keyword, and open-PR searches found no existing owner. Issue #775 tracks unrelated empty-name, label, landmark, and skip-navigation findings.\n\n## Expected impact\n\nClosing a dialog should return keyboard and assistive-technology users to the control that opened it. Falling back to the document body loses their place and makes repeated actions harder.\n\n## Proposed direction\n\nAdopt one explicit controlled-dialog focus contract:\n\n1. Require `DialogTrigger asChild` for dialogs with one colocated opener.\n2. Add a typed shared API for external or dynamic openers, such as an explicit restore-focus ref or a narrowly exposed Radix close-auto-focus callback.\n3. Add a browser-level regression test that opens a dialog, closes it with Escape and the close button, and verifies focus returns to the actual opener.\n\n## Alternatives and tradeoffs\n\n- Requiring `DialogTrigger` everywhere keeps the shared API smallest, but dynamic table-row openers would need dialog state and content moved per row or another structural change.\n- Restoring the previously active element automatically inside `DialogContent` reduces call-site work, but it changes every dialog and can restore focus to a stale or unrelated node when opening is indirect.\n- Exposing only `onCloseAutoFocus` matches Radix directly, but every caller must repeat the same focus logic and the shared primitive cannot enforce consistency.\n\n## Decision needed\n\n@tannerlinsley, should the shared controlled-dialog contract support both `DialogTrigger` for colocated openers and an explicit restore-focus ref for external or dynamic openers, or should every dialog be restructured so one `DialogTrigger` always owns the opener?\n\nSource: #1205\n","author":{"url":"https://github.com/tannerlinsley","@type":"Person","name":"tannerlinsley"},"datePublished":"2026-09-01T15:36:42Z","url":"https://github.com/TanStack/tanstack.com/issues/1209"}
| react-profiling | 0 |
| react-import-map | react,react-dom,react-dom/client,react-dom/profiling,react-is,react-reconciler,react/compiler-runtime,react/jsx-dev-runtime,react/jsx-runtime,scheduler@d5750093facf |
| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:7ea3a7af-289e-5aef-f9f0-f61b380b3435 |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | ED2A:1EDECA:3BEDE1D:4EEBAB6:6AF999C6 |
| html-safe-nonce | 99b6f491cecf9cccc44021ce054d4209d162e135dc7463e2b34ab673b40800be |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJFRDJBOjFFREVDQTozQkVERTFEOjRFRUJBQjY6NkFGOTk5QzYiLCJ2aXNpdG9yX2lkIjoiNTYyNDczNTQyNTEzOTE1MzM1MCIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9 |
| visitor-hmac | b36da4bc918fbc8ff0787e3d1bacf4215684f4b923c1dbec7ff73ed22b0f0436 |
| hovercard-subject-tag | issue:5313797886 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/TanStack/tanstack.com/1209/issue_layout |
| twitter:image | https://opengraph.githubassets.com/7513cd51553a27bae0e9c24948bf7cb6d12166630f1c96502b9ba61cb2b61b01/TanStack/tanstack.com/issues/1209 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/7513cd51553a27bae0e9c24948bf7cb6d12166630f1c96502b9ba61cb2b61b01/TanStack/tanstack.com/issues/1209 |
| og:image:alt | Evidence Merged PR #1205 moved shipping overlays onto the shared Radix-backed Dialog, but the controlled-dialog call sites do not register an opener with DialogTrigger. Current source has 16 contro... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | tannerlinsley |
| hostname | github.com |
| expected-hostname | github.com |
| None | 612d3e6ffd693e7ea8d9fcf452370995872baef31d825b1fedef704cd3d24ac7 |
| turbo-cache-control | no-preview |
| go-import | github.com/TanStack/tanstack.com git https://github.com/TanStack/tanstack.com.git |
| octolytics-dimension-user_id | 72518640 |
| octolytics-dimension-user_login | TanStack |
| octolytics-dimension-repository_id | 297489727 |
| octolytics-dimension-repository_nwo | TanStack/tanstack.com |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 297489727 |
| octolytics-dimension-repository_network_root_nwo | TanStack/tanstack.com |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 072e34035c13c31543fba9f025cbbbda4210dae4 |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
| react-app-name | issues |
Links:
Viewport: width=device-width