Merge pull request #254 from opf/fix/form-in-dialog

Dialogs close when moving mouse outside of it

Author: HDinger

Diff for: .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 for: 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 for: 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)