Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/no-close-dialog-with-form.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@openproject/primer-view-components': patch
---

Do not close dialogs when clicking on the backdrop if the dialog contains a form
3 changes: 3 additions & 0 deletions app/components/primer/dialog_helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,9 @@ export class DialogHelperElement extends HTMLElement {
// The click target _must_ be the dialog element itself, and not elements underneath or inside.
if (target !== dialog || !dialog?.open) return

// If the dialog contains a form, do not close the dialog when clicking outside of the dialog
if (dialog.querySelector('form')) return

const rect = dialog.getBoundingClientRect()
const clickWasInsideDialog =
rect.top <= event.clientY &&
Expand Down
9 changes: 9 additions & 0 deletions test/system/alpha/dialog_test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,15 @@ def test_outside_click_closes_dialog
refute_selector "dialog[open]"
end

def test_outside_click_does_not_close_dialog_with_form
visit_preview(:with_form)

click_button("Show Dialog")
mouse.click(x: 0, y: 0)

assert_selector "dialog[open]"
end

def test_outside_menu_click_does_not_close_dialog
visit_preview(:with_auto_complete)

Expand Down
Loading