From c40fc4e4efbeafe3f30469adec1033484112e0d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dan=20B=C3=BCschlen?= <danbueschlen@gmail.com>
Date: Wed, 19 Jun 2024 15:54:11 +0200
Subject: [PATCH] feat(menu): avoid captured key events from navigating the
 whole page (#191)

---
 src/components/dropdown/Dropdown.js                 | 5 +++--
 src/components/dropdown/stories/dropdown.stories.js | 4 ++++
 src/components/menu/Menu.js                         | 2 ++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
index 1b238008..344dcb44 100644
--- a/src/components/dropdown/Dropdown.js
+++ b/src/components/dropdown/Dropdown.js
@@ -75,8 +75,9 @@ export class LeuDropdown extends LeuElement {
     }
   }
 
-  async _keyUpToggleHandler(event) {
+  async _keyDownToggleHandler(event) {
     if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault()
       const menu = this._getMenu()
       const menuItems = menu.getMenuItems()
 
@@ -144,7 +145,7 @@ export class LeuDropdown extends LeuElement {
           expanded=${this.expanded ? "true" : "false"}
           ?active=${this.expanded}
           @click=${this._handleToggleClick}
-          @keyup=${this._keyUpToggleHandler}
+          @keydown=${this._keyDownToggleHandler}
         >
           ${hasIcon ? html`<slot name="icon" slot="before"></slot>` : nothing}
           ${this.label}</leu-button
diff --git a/src/components/dropdown/stories/dropdown.stories.js b/src/components/dropdown/stories/dropdown.stories.js
index 1a0a6721..cc2b6ddf 100644
--- a/src/components/dropdown/stories/dropdown.stories.js
+++ b/src/components/dropdown/stories/dropdown.stories.js
@@ -28,6 +28,10 @@ function Template({ label, expanded, icon }) {
   return html` <leu-dropdown label=${label} ?expanded=${expanded}>
     ${icon ? html`<leu-icon name=${icon} slot="icon"></leu-icon>` : nothing}
     <leu-menu>
+      <leu-menu-item
+        href="https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00001120_00002165.csv"
+        >OGD Ressource</leu-menu-item
+      >
       <leu-menu-item>Als CSV Tabelle</leu-menu-item>
       <leu-menu-item>Als XLS Tabelle</leu-menu-item>
       <hr />
diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
index c0f093ce..a350a86d 100644
--- a/src/components/menu/Menu.js
+++ b/src/components/menu/Menu.js
@@ -81,6 +81,8 @@ export class LeuMenu extends LeuElement {
 
   _handleKeyDown(event) {
     if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault()
+
       const menuItems = this.getMenuItems()
       let index = menuItems.findIndex((menuItem) => menuItem.tabIndex === 0)