@internetarchive/ia-topnav 1.3.5-alpha3 → 1.3.5-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.5-alpha3",
+  "version": "1.3.5-alpha5",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "index.js",

package/src/ia-topnav.js

@@ -305,6 +305,7 @@ export default class IATopNav extends LitElement {
       <desktop-subnav
         .baseHost=${this.baseHost}
         .menuItems=${this.desktopSubnavMenuItems}
+        @focus=${this.closeMenus}
       ></desktop-subnav>
       <div id="close-layer" class="${this.closeLayerClass}" @click=${this.closeMenus}></div>
     `;

package/src/search-menu.js

@@ -30,36 +30,33 @@ class SearchMenu extends TrackedElement {
   }
 
   firstUpdated() {
-    this.shadowRoot.addEventListener('keydown', (e) => {
-      const searchTypes = this.shadowRoot.querySelectorAll('.search-menu-inner label input[type=radio]');
-      const length = searchTypes.length - 1;
+    this.shadowRoot.addEventListener('keydown', e => this.handleKeyDownEvent(e));
+  }
 
-      // Prevent the default scrolling behavior for Home and End keys
-      if (e.key === 'Home' || e.key === 'End') {
-        e.preventDefault();
-      }
+  disconnectedCallback() {
+    // Clean up event listener when the element is removed
+    this.shadowRoot.removeEventListener('keydown', e => this.handleKeyDownEvent(e));
+  }
 
-      // early return if searchTypes not found
-      if (!length) return;
+  handleKeyDownEvent(e) {
+    const searchTypes = this.shadowRoot.querySelectorAll('.search-menu-inner label input[type=radio]');
 
-      const searchTypeHandler = (index) => {
-        const searchType = searchTypes[index];
-        searchType.checked = true;
-        searchType.dispatchEvent(new Event('change'));
-        searchType.focus();
-      };
+    const length = searchTypes.length - 1;
+    if (!length) return;
 
-      if (e.key === 'Home') {
-        searchTypeHandler(0);
-      } else if (e.key === 'End') {
-        searchTypeHandler(length);
-      }
-    });
-  }
+    const searchTypeHandler = (index) => {
+      e.preventDefault();
+      const searchType = searchTypes[index];
+      searchType.checked = true;
+      searchType.dispatchEvent(new Event('change'));
+      searchType.focus();
+    };
 
-  disconnectedCallback() {
-    // Clean up event listener when the element is removed
-    this.shadowRoot.removeEventListener('keydown');
+    if (e.key === 'Home') {
+      searchTypeHandler(0);
+    } else if (e.key === 'End') {
+      searchTypeHandler(length);
+    }
   }
 
   selectSearchType(e) {