Fix dialog click outside early return (#2549)

Co-authored-by: Cameron Dutro <[email protected]>

Author: keithamus

.changeset/small-flowers-refuse.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Ensure dialogs do not close when a child menu item (or similar) is clicked

app/components/primer/dialog_helper.ts

@@ -15,6 +15,7 @@ function dialogInvokerButtonHandler(event: Event) {
       // If the behaviour is allowed through the dialog will be shown but then
       // quickly hidden- as if it were never shown. This prevents that.
       event.preventDefault()
+      event.stopPropagation()
     }
   }
 
@@ -35,7 +36,7 @@ export class DialogHelperElement extends HTMLElement {
   #abortController: AbortController | null = null
   connectedCallback() {
     const {signal} = (this.#abortController = new AbortController())
-    document.addEventListener('click', dialogInvokerButtonHandler)
+    document.addEventListener('click', dialogInvokerButtonHandler, true)
     document.addEventListener('click', this, {signal})
     this.ownerDocument.body.style.setProperty(
       '--dialog-scrollgutter',
@@ -58,7 +59,10 @@ export class DialogHelperElement extends HTMLElement {
     const target = event.target as HTMLElement
     const dialog = this.dialog
     if (!dialog?.open) return
-    if (target?.closest('dialog') !== dialog) return
+
+    // if the target is inside the dialog, but is not the dialog itself, leave
+    // the dialog open
+    if (target?.closest('dialog') === dialog && target !== dialog) return
 
     const rect = dialog.getBoundingClientRect()
     const clickWasInsideDialog =

test/css/component_specific_selectors_test.rb

@@ -37,7 +37,8 @@ class ComponentSpecificSelectorsTest < Minitest::Test
       ".Banner .Banner-close"
     ],
     Primer::Alpha::Dialog => [
-      ".Overlay"
+      ".Overlay",
+      ".has-modal"
     ],
     Primer::Alpha::Layout => [
       ".Layout-divider",

test/system/alpha/dialog_test.rb

@@ -74,5 +74,24 @@ def test_with_scrollable_body
       visit_preview(:long_text)
       click_button("Show Dialog")
     end
+
+    def test_outside_click_closes_dialog
+      visit_preview(:default)
+
+      click_button("Show Dialog")
+      page.driver.browser.mouse.click(x: 0, y: 0)
+
+      refute_selector "dialog[open]"
+    end
+
+    def test_outside_menu_click_does_not_close_dialog
+      visit_preview(:with_auto_complete)
+
+      click_button("Show Dialog")
+      fill_in "input", with: "a"
+
+      find(".ActionListItem", text: "Avocado").click
+      assert_selector "dialog[open]"
+    end
   end
 end