Fix opening a dialog from an ActionMenu item (#1953)

.changeset/moody-zoos-bow.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix opening a dialog from an ActionMenu item

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
 

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