Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Define focus restoration for controlled dialogs

Aberta
#1,209 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
35/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
typescript

Direção de pesquisa

Comece revisando as 16 raízes de Dialog controladas, incluindo o seletor de pacotes baseline do NPM, o diálogo de remoção de função de administrador e os exemplos do design system. Compare as disposições dos respectivos opener com o Dialog compartilhado baseado em Radix e defina o contrato depois que a decisão pendente for resolvida. O trabalho estará concluído quando o comportamento escolhido de restauração do foco estiver implementado e um teste de regressão em nível de navegador verificar que o foco retorna após Escape e o fechamento pelo botão de fechar.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

source-audit

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 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.

This is straightforward for colocated single openers, such as the NPM baseline package picker. It is not one mechanical change for every caller:

  • Some dialogs are controlled by an opener in a parent component.
  • The admin role removal dialog has one dynamic opener per table row.
  • Some design-system examples currently keep their opener outside the Dialog root.

Repeated title, body, keyword, and open-PR searches found no existing owner. Issue #775 tracks unrelated empty-name, label, landmark, and skip-navigation findings.

Expected impact

Closing 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.

Proposed direction

Adopt one explicit controlled-dialog focus contract:

  1. Require DialogTrigger asChild for dialogs with one colocated opener.
  2. 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.
  3. 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.

Alternatives and tradeoffs

  • 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.
  • 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.
  • Exposing only onCloseAutoFocus matches Radix directly, but every caller must repeat the same focus logic and the shared primitive cannot enforce consistency.

Decision needed

@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?

Source: #1205

Linguagem predominante
TypeScript
Estrelas
1.1k
Forks
401
Merge médio
16h 8min
PRs com merge (30d)
58

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/tanstack.com

Todas as issues de TanStack/tanstack.com

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.