@internetarchive/ia-topnav 1.3.5-alpha2 → 1.3.5-alpha4

package/package.json

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

package/src/nav-search.js

@@ -100,6 +100,17 @@ class NavSearch extends TrackedElement {
             autocomplete="off"
             tabindex="2"
             @focus=${this.toggleSearchMenu}
+            @blur=${(e) => {
+              if (e.relatedTarget?.tagName !== 'SEARCH-MENU') {
+                this.dispatchEvent(new CustomEvent('menuToggled', {
+                  detail: {
+                    menuName: 'search'
+                  },
+                  composed: true,
+                  bubbles: true,
+                }));
+              }
+            }}
             value=${this.searchQuery || ''}
           />
           ${this.searchInsideInput}

package/src/primary-nav.js

@@ -157,12 +157,7 @@ class PrimaryNav extends TrackedElement {
     return html`
       <a href="${formatUrl('/create', this.baseHost)}"
         class="upload"
-        tabindex="1"
-        @focus=${(e) => {
-          if (e.relatedTarget !== null) {
-            this.toggleSearchMenu(e)
-          }
-        }}>
+        tabindex="1">
       ${icons.upload}
       <span>Upload</span>
     </a>`;

package/src/search-menu.js

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