From e64edfc495591719f3e0ac9c9b2b8e2e429d2e4f Mon Sep 17 00:00:00 2001
From: Cameron Dutro <camertron@gmail.com>
Date: Fri, 14 Apr 2023 11:41:23 -0700
Subject: [PATCH] Fix opening a dialog from an ActionMenu item (#1953)

---
 .changeset/moody-zoos-bow.md                |  5 +++++
 app/components/primer/alpha/modal_dialog.ts |  8 +-------
 test/system/alpha/action_menu_test.rb       | 22 +++++++++++++++++++++
 3 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/moody-zoos-bow.md

diff --git a/.changeset/moody-zoos-bow.md b/.changeset/moody-zoos-bow.md
new file mode 100644
index 0000000000..dd8b7b4e7d
--- /dev/null
+++ b/.changeset/moody-zoos-bow.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix opening a dialog from an ActionMenu item
diff --git a/app/components/primer/alpha/modal_dialog.ts b/app/components/primer/alpha/modal_dialog.ts
index d28884a460..869861c04f 100644
--- a/app/components/primer/alpha/modal_dialog.ts
+++ b/app/components/primer/alpha/modal_dialog.ts
@@ -11,13 +11,7 @@ const overlayStack: ModalDialogElement[] = []
 
 function clickHandler(event: Event) {
   const target = event.target as HTMLElement
-  let button: HTMLButtonElement | null = null
-
-  if (target instanceof HTMLButtonElement) {
-    button = target
-  } else {
-    button = target?.querySelector('button')
-  }
+  const button = target?.closest('button')
 
   if (!button) return
 
diff --git a/test/system/alpha/action_menu_test.rb b/test/system/alpha/action_menu_test.rb
index 1df70a43bb..43f4f20b8c 100644
--- a/test/system/alpha/action_menu_test.rb
+++ b/test/system/alpha/action_menu_test.rb
@@ -132,5 +132,27 @@ def test_first_item_is_focused_on_invoker_keydown
 
       assert_equal page.evaluate_script("document.activeElement").text, "Alert"
     end
+
+    def test_opens_dialog
+      visit_preview(:opens_dialog)
+
+      find("action-menu button[aria-controls]").click
+      find("action-menu ul li:nth-child(2)").click
+
+      assert_selector "modal-dialog#my-dialog"
+    end
+
+    def test_opens_dialog_on_keydown
+      visit_preview(:opens_dialog)
+
+      page.evaluate_script(<<~JS)
+        document.querySelector('action-menu button[aria-controls]').focus()
+      JS
+
+      # open menu, arrow down to second item, "click" second item
+      page.driver.browser.keyboard.type(:enter, :down, :enter)
+
+      assert_selector "modal-dialog#my-dialog"
+    end
   end
 end