From 8277fc7a6c97efc0598b2dacf800e2f05127f114 Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Tue, 30 Aug 2022 08:55:10 +0530
Subject: [PATCH] replace the shortcuts with event listener

---
 src/backend/views/components/sidebar.twig |  2 +-
 src/frontend/js/modules/sidebar.js        | 56 +++++++----------------
 2 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/src/backend/views/components/sidebar.twig b/src/backend/views/components/sidebar.twig
index a40de9c..83be67c 100644
--- a/src/backend/views/components/sidebar.twig
+++ b/src/backend/views/components/sidebar.twig
@@ -7,7 +7,7 @@
 
   <aside class="docs-sidebar__content docs-sidebar__content--invisible">
     <span>
-	    <input class="docs-sidebar__search" type="text" placeholder="Search">
+	    <input class="docs-sidebar__search" type="text" placeholder="Search" />
 	  </span>
     {% for firstLevelPage in menu %}
       <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
diff --git a/src/frontend/js/modules/sidebar.js b/src/frontend/js/modules/sidebar.js
index ae3a6e0..06e56af 100644
--- a/src/frontend/js/modules/sidebar.js
+++ b/src/frontend/js/modules/sidebar.js
@@ -112,6 +112,8 @@ export default class Sidebar {
     });
     // Get search results if search input is empty.
     this.search('');
+    // Add event listener for keyboard events.
+    this.nodes.sidebar.addEventListener('keydown', e => this.handleKeyboardEventOnSearch(e));
     this.ready();
   }
 
@@ -245,38 +247,12 @@ export default class Sidebar {
     new Shortcut({
       name: 'CMD+P',
       on: document.body,
-      callback: () => {
+      callback: (e) => {
+        document.activeElement.blur();
         this.nodes.search.focus();
-      },
-    });
-
-    // Add event listener for up key during search input focus.
-    // eslint-disable-next-line no-new
-    new Shortcut({
-      name: 'up',
-      on: document.body,
-      callback: () => {
-        this.handleKeyboardEventOnSearch('up');
-      },
-    });
-
-    // Add event listener for down key during search input focus.
-    // eslint-disable-next-line no-new
-    new Shortcut({
-      name: 'down',
-      on: document.body,
-      callback: () => {
-        this.handleKeyboardEventOnSearch('down');
-      },
-    });
-
-    // Add event listener for enter key during search input focus.
-    // eslint-disable-next-line no-new
-    new Shortcut({
-      name: 'enter',
-      on: document.body,
-      callback: () => {
-        this.handleKeyboardEventOnSearch('enter');
+        // Stop propagation of event.
+        e.stopImmediatePropagation();
+        e.preventDefault();
       },
     });
   }
@@ -304,22 +280,22 @@ export default class Sidebar {
 
   /**
    * Handle keyboard events when search input is focused.
-   * 
-   * @param {string} eventType - type of the event.
+   *
+   * @param {Event} e - Event Object.
    * @returns {void}
    */
-  handleKeyboardEventOnSearch(eventType) {
+  handleKeyboardEventOnSearch(e) {
     // Return if search is not focused.
     if (this.nodes.search !== document.activeElement) {
       return;
     }
 
     // if enter is pressed and item is focused, then click on focused item.
-    if (eventType === 'enter' && this.nodes.selectedSearchResultIndex !== null) {
+    if (e.code === 'Enter' && this.nodes.selectedSearchResultIndex !== null) {
       this.nodes.searchResults[this.nodes.selectedSearchResultIndex].element.click();
     }
 
-    if (eventType === 'up' || eventType === 'down') {
+    if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {
       // check for search results.
       if (this.nodes.searchResults.length === 0) {
         return;
@@ -330,23 +306,23 @@ export default class Sidebar {
       // get next item index.
       if (this.nodes.selectedSearchResultIndex === null) {
         // if no item is focused and up press, focus last item.
-        if (eventType === 'up') {
+        if (e.code === 'ArrowUp') {
           this.nodes.selectedSearchResultIndex = this.nodes.searchResults.length - 1;
         }
         // if no item is focused and down press, focus first item.
-        if (eventType === 'down') {
+        if (e.code === 'ArrowDown') {
           this.nodes.selectedSearchResultIndex = 0;
         }
       } else {
         // if item is focused and up press, focus previous item.
-        if (eventType === 'up') {
+        if (e.code === 'ArrowUp') {
           this.nodes.selectedSearchResultIndex--;
           if (this.nodes.selectedSearchResultIndex < 0) {
             this.nodes.selectedSearchResultIndex = this.nodes.searchResults.length - 1;
           }
         }
         // if item is focused and down press, focus next item.
-        if (eventType === 'down') {
+        if (e.code === 'ArrowDown') {
           this.nodes.selectedSearchResultIndex++;
           if (this.nodes.selectedSearchResultIndex >= this.nodes.searchResults.length) {
             this.nodes.selectedSearchResultIndex = 0;