Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#570 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
html, javascript, ruby
Área
frontend

Línea de trabajo

Empieza con dialog_controller.js e inspecciona backdropClick, que actualmente cierra el diálogo cuando el destino del evento es el diálogo. Reproduce el problema haciendo clic en el relleno del panel o en un espacio entre campos del formulario; después, revisa el enfoque sugerido basado en rectángulos y su salvedad sobre los clics del teclado. El trabajo está terminado cuando los clics dentro del panel lo dejan abierto y los clics en el fondo siguen cerrándolo.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
Ruby
Estrellas
1k
Forks
68
Merge medio
17 h 45 min
PR fusionados (30 d)
17

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de ruby-ui/ruby_ui

Todos los issues de ruby-ui/ruby_ui

Issues similares

Más issues de Ruby

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.