Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#570 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
82/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
html, javascript, ruby
Domaine
frontend

Piste de recherche

Commence par dialog_controller.js et examine backdropClick, qui ferme actuellement la boîte de dialogue lorsque la cible de l’événement est la boîte de dialogue. Reproduis le problème en cliquant sur la marge intérieure du panneau ou sur un espace entre les champs du formulaire, puis examine l’approche suggérée fondée sur un rectangle et sa réserve concernant les clics au clavier. Le travail est terminé lorsque les clics à l’intérieur du panneau le laissent ouvert et que les clics sur l’arrière-plan continuent de le fermer.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
Ruby
Étoiles
1k
Forks
68
Merge moyen
17 h 45 min
PR mergées (30 j)
17

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de ruby-ui/ruby_ui

Toutes les issues de ruby-ui/ruby_ui

Issues similaires

Plus d'issues Ruby

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.