the integration for input box completed

src/frontend/js/modules/sidebar.js

@@ -240,11 +240,44 @@ export default class Sidebar {
       callback: () => this.handleSliderClick(),
     });
 
+    // Add event listener to focus search input on Ctrl+P or ⌘+P is pressed.
     // eslint-disable-next-line no-new
     new Shortcut({
       name: 'CMD+P',
       on: document.body,
-      callback: () => {this.nodes.search.focus()},
+      callback: () => {
+        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');
+      },
     });
   }
 
@@ -270,21 +303,23 @@ export default class Sidebar {
   }
 
   /**
-   * Keyboard event listener added
+   * Handle keyboard events when search input is focused.
    * 
-   * @param {KeyboardEvent} e - keyboard event.
+   * @param {string} eventType - type of the event.
+   * @returns {void}
    */
-  keyboardListener(e) {
+  handleKeyboardEventOnSearch(eventType) {
-    // If Ctrl+P or ⌘+P is pressed, focus search input.
+    // Return if search is not focused.
-    if ((e.ctrlKey || e.metaKey) && e.code === 'KeyP') {
+    if (this.nodes.search !== document.activeElement) {
-      this.nodes.search.focus();
+      return;
-      e.preventDefault();
     }
-    // If search is focused and arrow keys are pressed, move focus to next/previous item.
+
-    if (this.nodes.search === document.activeElement) {
+    // if enter is pressed and item is focused, then click on focused item.
-      if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {
+    if (eventType === 'enter' && this.nodes.selectedSearchResultIndex !== null) {
-        e.stopImmediatePropagation();
+      this.nodes.searchResults[this.nodes.selectedSearchResultIndex].element.click();
-        e.preventDefault();
+    }
+
+    if (eventType === 'up' || eventType === 'down') {
       // check for search results.
       if (this.nodes.searchResults.length === 0) {
         return;
@@ -295,23 +330,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 (e.code === 'ArrowUp') {
+        if (eventType === 'up') {
           this.nodes.selectedSearchResultIndex = this.nodes.searchResults.length - 1;
         }
         // if no item is focused and down press, focus first item.
-          if (e.code === 'ArrowDown') {
+        if (eventType === 'down') {
           this.nodes.selectedSearchResultIndex = 0;
         }
       } else {
         // if item is focused and up press, focus previous item.
-          if (e.code === 'ArrowUp') {
+        if (eventType === 'up') {
           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 (e.code === 'ArrowDown') {
+        if (eventType === 'down') {
           this.nodes.selectedSearchResultIndex++;
           if (this.nodes.selectedSearchResultIndex >= this.nodes.searchResults.length) {
             this.nodes.selectedSearchResultIndex = 0;
@@ -367,13 +402,6 @@ export default class Sidebar {
         }
       }
     }
-      // if enter is pressed, click on focused item.
-      if (e.code === 'Enter') {
-        if (this.nodes.selectedSearchResultIndex !== null) {
-          this.nodes.searchResults[this.nodes.selectedSearchResultIndex].element.click();
-        }
-      }
-    }
   }
 
   /**