Prevent event propagation when in SelectPanel (#3700)

Author: TylerJDev

.changeset/proud-baths-brake.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+SelectPanel: Prevents `keydown` events from escaping the SelectPanel when within the items.

app/components/primer/alpha/select_panel_element.ts

@@ -449,6 +449,18 @@ export class SelectPanelElement extends HTMLElement {
       return
     }
 
+    if (
+      event.type === 'keydown' &&
+      event instanceof KeyboardEvent &&
+      (event.target as Element).closest(visibleMenuItemSelectors)
+    ) {
+      const hasModifier = event.ctrlKey || event.altKey || event.metaKey
+      const isAlphabetKey = event.key.length === 1 && /[a-z\d]/i.test(event.key)
+
+      // eslint-disable-next-line no-restricted-syntax
+      if (!hasModifier && isAlphabetKey) event.stopPropagation()
+    }
+
     if (event.target === this.dialog && event.type === 'close') {
       // Remove data-ready so it can be set the next time the panel is opened
       this.dialog.removeAttribute('data-ready')

test/system/alpha/select_panel_test.rb

@@ -1365,5 +1365,33 @@ def test_announces_error_on_filter_failure
         end
       end
     end
+
+    def test_prevents_events_from_bubbling
+      visit_preview(:default)
+
+      click_on_invoker_button
+      
+      keyboard.type(:tab)
+
+      evaluate_multiline_script(<<~JS)
+        document.body.addEventListener('keydown', (event) => {
+          window.bodyKeydownFired = true
+        }, { once: true })
+      JS
+
+      assert_includes active_element.text, "Item 1"
+
+      keyboard.type("a")  # type an alphabetic key, which should be stopped from propagating
+
+      refute page.evaluate_script("window.bodyKeydownFired")
+
+      keyboard.type(:escape)  # close the panel
+
+      refute_selector "select-panel dialog[open]"
+
+      keyboard.type("a")  
+
+      assert page.evaluate_script("window.bodyKeydownFired")
+    end
   end
-end
+end