From c9e644f3fc57d0b65c37fe06283b383641e56d3e Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 6 Jul 2023 10:36:29 -0400
Subject: [PATCH] Allow selecting menu items with space (#1429)

* allow selecting menu items with space; #1423

* update PR
---
 docs/pages/resources/changelog.md | 1 +
 src/components/menu/menu.ts       | 9 ++-------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index df0c4b84..bb92ac15 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -15,6 +15,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## Next
 
 - Added tests for `<sl-qr-code>` [#1416]
+- Added support for pressing [[Space]] to select/toggle selected `<sl-menu-item>` elements [#1429]
 - Fixed a bug in `<sl-qr-code>` where the `background` attribute was never passed to the QR code [#1416]
 - Fixed a bug in `<sl-dropdown>` where aria attributes were incorrectly applied to the default `<slot>` causing Lighthouse errors [#1417]
 - Fixed a bug in `<sl-carousel>` that caused navigation to work incorrectly in some case [#1420]
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 8fecda05..3091f834 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -45,8 +45,8 @@ export default class SlMenu extends ShoelaceElement {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
-    // Make a selection when pressing enter
-    if (event.key === 'Enter') {
+    // Make a selection when pressing enter or space
+    if (event.key === 'Enter' || event.key === ' ') {
       const item = this.getCurrentItem();
       event.preventDefault();
 
@@ -54,11 +54,6 @@ export default class SlMenu extends ShoelaceElement {
       item?.click();
     }
 
-    // Prevent scrolling when space is pressed
-    if (event.key === ' ') {
-      event.preventDefault();
-    }
-
     // Move the selection when pressing down or up
     if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
       const items = this.getAllItems();