feat(menu): avoid captured key events from navigating the whole page (#…

…191)
statistikZH · Jun 19, 2024 · c40fc4e · c40fc4e
1 parent 4dfddcd
commit c40fc4e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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)