diff --git a/.changeset/no-close-dialog-with-form.md b/.changeset/no-close-dialog-with-form.md new file mode 100644 index 0000000000..261c1a2d4b --- /dev/null +++ b/.changeset/no-close-dialog-with-form.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': patch +--- + +Do not close dialogs when clicking on the backdrop if the dialog contains a form diff --git a/app/components/primer/dialog_helper.ts b/app/components/primer/dialog_helper.ts index 1382029bd1..3cf26f7c67 100644 --- a/app/components/primer/dialog_helper.ts +++ b/app/components/primer/dialog_helper.ts @@ -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 && diff --git a/test/system/alpha/dialog_test.rb b/test/system/alpha/dialog_test.rb index 9a58dd2538..cb949845d3 100644 --- a/test/system/alpha/dialog_test.rb +++ b/test/system/alpha/dialog_test.rb @@ -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)