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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.5-alpha2",
+  "version": "1.3.5-alpha3",
   "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,10 +30,15 @@ class SearchMenu extends TrackedElement {
   }
 
   firstUpdated() {
-    this.shadowRoot.addEventListener('keyup', (e) => {
+    this.shadowRoot.addEventListener('keydown', (e) => {
       const searchTypes = this.shadowRoot.querySelectorAll('.search-menu-inner label input[type=radio]');
       const length = searchTypes.length - 1;
 
+      // Prevent the default scrolling behavior for Home and End keys
+      if (e.key === 'Home' || e.key === 'End') {
+        e.preventDefault();
+      }
+
       // early return if searchTypes not found
       if (!length) return;
 
@@ -52,6 +57,11 @@ class SearchMenu extends TrackedElement {
     });
   }
 
+  disconnectedCallback() {
+    // Clean up event listener when the element is removed
+    this.shadowRoot.removeEventListener('keydown');
+  }
+
   selectSearchType(e) {
     this.selectedSearchType = e.target.value;
   }