Dialog: clicking the panel's inner padding closes it (backdropClick matches the <dialog> itself)
維護者通常 1 天內回覆
還沒有人認領這個 Issue。
評估
- 難度
- 2/5
- 預估耗時
- 1-3 小時
- 新手友好度
- 82/100
- Issue 類型
- 缺陷
- 描述清晰度
- 描述清楚
- 活躍度
- 活躍
- 技術堆疊
- html, javascript, ruby
- 領域
- frontend
研究方向
從 dialog_controller.js 開始，檢查 backdropClick；當事件目標是對話框時，它目前會關閉對話框。點擊面板內距或表單欄位之間的空隙來重現問題，接著查看建議的矩形式作法及其對鍵盤點擊的注意事項。完成標準是：點擊面板內部時面板保持開啟，點擊背景時仍會關閉。
由索引模型根據 Issue 內容生成。
描述
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
- Open any
Dialog(e.g. one with a form inside). - Click inside the panel, in the padding area or between two fields — not on a child element.
- 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.)
- 主要語言
- Ruby
- 星號
- 1k
- 分支
- 68
- 平均合併
- 17 小時 45 分鐘
- 30 天內合併 PR
- 17
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
ruby-ui/ruby_ui 的其他 Issue
-
bug
難度 2/5 1-3 小時 新手友好度 78/100
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 72/100
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 82/100
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 55/100
維護者通常 1 天內回覆
-
bug
難度 1/5 1-3 小時 新手友好度 35/100
維護者通常 1 天內回覆
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 65/100
alphagov/public-asset-checker#378 · 1 則留言 ·
維護者通常 1 天內回覆
-
data error
難度 2/5 1-3 小時 新手友好度 82/100
riscv/riscv-unified-db#2749 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 88/100
維護者通常 2 天內回覆
-
RubyGems
難度 2/5 1-3 小時 新手友好度 73/100
維護者通常 1 天內回覆
-
jrubyc-compiled code with an array pattern fails to load (NullPointerException reading persisted IR)可能已有人在做 @sferik 今天認領。 未關閉
難度 2/5 1-3 小時 新手友好度 82/100
維護者通常 2 天內回覆