Fix the hotkeys after search modal has been opened and closed (#299)

Closes #169 Closes #172 --------- Co-authored-by: Manuel Kaufmann <[email protected]>
readthedocs · May 14, 2024 · 48fd4f1 · 48fd4f1
1 parent 79db43c
commit 48fd4f1
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/dist/readthedocs-addons.js b/dist/readthedocs-addons.js
diff --git a/dist/readthedocs-addons.js.map b/dist/readthedocs-addons.js.map
diff --git a/src/hotkeys.js b/src/hotkeys.js
@@ -43,7 +43,6 @@ export class HotKeysElement extends LitElement {
     this.docDiffShowed = false;
 
     this.searchHotKeyEnabled = this.config.addons.hotkeys.search.enabled;
-    this.searchShowed = false;
   }
 
   _handleKeydown = (e) => {
@@ -78,13 +77,7 @@ export class HotKeysElement extends LitElement {
       document.activeElement.tagName !== "TEXTAREA" &&
       document.activeElement.tagName !== "READTHEDOCS-SEARCH"
     ) {
-      if (this.searchShowed) {
-        event = new CustomEvent(EVENT_READTHEDOCS_SEARCH_HIDE);
-        this.searchShowed = false;
-      } else {
-        event = new CustomEvent(EVENT_READTHEDOCS_SEARCH_SHOW);
-        this.searchShowed = true;
-      }
+      event = new CustomEvent(EVENT_READTHEDOCS_SEARCH_SHOW);
     }
 
     if (event !== undefined) {

diff --git a/src/search.js b/src/search.js
@@ -125,7 +125,7 @@ export class SearchElement extends LitElement {
   renderSearchModal() {
     return html`
       <div ?hidden=${!this.show} role="search">
-        <div @click=${this.closeModal} class="background"></div>
+        <div @click=${this.triggerCloseModal} class="background"></div>
         <div class="content">
           <form class=${classMap(this.cssFormFocusClasses)}>
             <label>${this.inputIcon.node[0]}</label>
@@ -409,6 +409,9 @@ export class SearchElement extends LitElement {
 
   closeModal(e) {
     this.show = false;
+    // Blur the active element (which at this point will be input or the search element itself)
+    // in order for the hotkeys to properly detect future hotkeys
+    document.activeElement.blur();
   }
 
   showModal(e) {
@@ -490,27 +493,29 @@ export class SearchElement extends LitElement {
   }
 
   selectResultKeyboard(e) {
-    // if "ArrowDown is pressed"
-    if (e.keyCode === 40) {
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       this.selectNextResult(true);
     }
 
-    // if "ArrowUp" is pressed.
-    if (e.keyCode === 38) {
+    if (e.key === "ArrowUp") {
       e.preventDefault();
       this.selectNextResult(false);
     }
 
-    // if "Enter" key is pressed.
-    if (e.keyCode === 13) {
+    if (e.key === "Enter") {
       e.preventDefault();
       const selected = this.renderRoot.querySelector("a.hit.active");
       // if an item is selected, then redirect to its link
       if (selected !== null) {
         window.location.href = selected.href;
       }
     }
+
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.triggerCloseModal();
+    }
   }
 
   getUserQuery() {
@@ -621,6 +626,11 @@ export class SearchElement extends LitElement {
     }
   }
 
+  triggerCloseModal() {
+    const event = new CustomEvent(EVENT_READTHEDOCS_SEARCH_HIDE);
+    document.dispatchEvent(event);
+  }
+
   _handleCloseModal = (e) => {
     e.preventDefault();
     this.closeModal();