Prevent scrolling when activating ActionMenu items via space (#2326)

.changeset/dry-cameras-attend.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Prevent scrolling when activating ActionMenu items via space

app/components/primer/alpha/action_bar_element.ts

@@ -93,6 +93,8 @@ class ActionBarElement extends HTMLElement {
 
   #isVisible(element: HTMLElement): boolean {
     // Safari doesn't support `checkVisibility` yet.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     if (typeof element.checkVisibility === 'function') return element.checkVisibility()
 
     return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight)

app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -134,11 +134,24 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   #isKeyboardActivation(event: Event): boolean {
+    return this.#isKeyboardActivationViaEnter(event) || this.#isKeyboardActivationViaSpace(event)
+  }
+
+  #isKeyboardActivationViaEnter(event: Event): boolean {
+    return (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      event.key === 'Enter'
+    )
+  }
+
+  #isKeyboardActivationViaSpace(event: Event): boolean {
     return (
       event instanceof KeyboardEvent &&
       event.type === 'keydown' &&
       !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-      (event.key === 'Enter' || event.key === ' ')
+      event.key === ' '
     )
   }
 
@@ -202,6 +215,16 @@ export class ActionMenuElement extends HTMLElement {
 
       this.#activateItem(event, item)
       this.#handleItemActivated(event, item)
+
+      // Pressing the space key on a button will cause the page to scroll unless preventDefault()
+      // is called. Unfortunately, calling preventDefault() will also skip form submission. The
+      // code below therefore only calls preventDefault() if the button submits a form and the
+      // button is being activated by the space key.
+      if (item.getAttribute('type') === 'submit' && this.#isKeyboardActivationViaSpace(event)) {
+        event.preventDefault()
+        item.closest('form')?.submit()
+      }
+
       return
     }