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

Dialog: clicking the panel's inner padding closes it (backdropClick matches the <dialog> itself)

Aberta Para iniciantes
  • Algo errado?
#570 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
82/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
html, javascript, ruby
Domínio
frontend

Direção de pesquisa

Comece por dialog_controller.js e examine backdropClick, que atualmente fecha o diálogo quando o alvo do evento é o próprio diálogo. Reproduza o problema clicando no espaçamento interno do painel ou em um espaço entre os campos do formulário; em seguida, confira a abordagem sugerida baseada em retângulo e a ressalva sobre cliques do teclado. O trabalho estará concluído quando os cliques dentro do painel o mantiverem aberto e os cliques no fundo continuarem fechando-o.

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

Descrição

Bug

Dialog closes when the user clicks the empty padding inside the panel, not only the backdrop.

DialogContent renders a native <dialog> with p-6 and gap-4, and dialog_controller.js dismisses on any click whose target is the <dialog> itself:

backdropClick(e) {
  if (e.target === this.dialogTarget) {
    this.dismiss()
  }
}

A click on the ::backdrop and a click on the panel's own padding (or the gaps between children) both report e.target === dialog, so both close the dialog.

Reproduce

  1. Open any Dialog (e.g. one with a form inside).
  2. Click inside the panel, in the padding area or between two fields — not on a child element.
  3. The dialog closes.

Seen on main (b96aaf3); #517 keeps backdropClick as is.

Suggested fix

Only dismiss when the pointer is outside the panel's rectangle:

backdropClick(e) {
  if (e.target !== this.dialogTarget) return

  const rect = this.dialogTarget.getBoundingClientRect()
  const outside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom
  if (outside) this.dismiss()
}

(Keyboard-triggered clicks report clientX/clientY of 0, which falls outside the rect only when the dialog isn't at the top-left corner — worth guarding with e.detail === 0 if that matters.)

Linguagem predominante
Ruby
Estrelas
1k
Forks
68
Merge médio
17h 45min
PRs com merge (30d)
17

Preparar o ambiente

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 ruby-ui/ruby_ui

Todas as issues de ruby-ui/ruby_ui

Issues semelhantes

Mais issues de Ruby

Receba novas issues na sua caixa de entrada

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