diff --git a/app/src/plugin/commandPanel.ts b/app/src/plugin/commandPanel.ts
index 81d037b33..636d8128d 100644
--- a/app/src/plugin/commandPanel.ts
+++ b/app/src/plugin/commandPanel.ts
@@ -82,9 +82,15 @@ export const commandPanel = (app: App) => {
 
 const filterList = (inputElement: HTMLInputElement, listElement: Element) => {
     const inputValue = inputElement.value.toLowerCase();
+    listElement.querySelector(".b3-list-item--focus")?.classList.remove("b3-list-item--focus");
+    let hasFocus = false;
     Array.from(listElement.children).forEach((element: HTMLElement) => {
         const elementValue = element.querySelector(".b3-list-item__text").textContent.toLowerCase();
         if (inputValue.indexOf(elementValue) > -1 || elementValue.indexOf(inputValue) > -1) {
+            if (!hasFocus) {
+                element.classList.add("b3-list-item--focus");
+            }
+            hasFocus = true
             element.classList.remove("fn__none");
         } else {
             element.classList.add("fn__none");
diff --git a/app/src/util/upDownHint.ts b/app/src/util/upDownHint.ts
index 72d1d7601..efbb1dfa0 100644
--- a/app/src/util/upDownHint.ts
+++ b/app/src/util/upDownHint.ts
@@ -1,20 +1,31 @@
 export const upDownHint = (listElement: Element, event: KeyboardEvent, classActiveName = "b3-list-item--focus") => {
     let currentHintElement: HTMLElement = listElement.querySelector("." + classActiveName);
+    if (!currentHintElement) {
+        return
+    }
     const className = classActiveName.split("--")[0];
     if (event.key === "ArrowDown") {
         event.preventDefault();
         event.stopPropagation();
         currentHintElement.classList.remove(classActiveName);
-        if (!currentHintElement.nextElementSibling) {
-            listElement.children[0].classList.add(classActiveName);
-        } else {
-            if (currentHintElement.nextElementSibling.classList.contains(className)) {
-                currentHintElement.nextElementSibling.classList.add(classActiveName);
-            } else {
-                currentHintElement.nextElementSibling.nextElementSibling.classList.add(classActiveName);
+
+        currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
+        while (currentHintElement &&
+        (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) {
+            currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
+        }
+
+        if (!currentHintElement) {
+            currentHintElement = listElement.children[0] as HTMLElement;
+            while (currentHintElement &&
+            (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) {
+                currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
             }
         }
-        currentHintElement = listElement.querySelector("." + classActiveName);
+        if (!currentHintElement) {
+            return
+        }
+        currentHintElement.classList.add(classActiveName);
         if (listElement.scrollTop < currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight ||
             listElement.scrollTop > currentHintElement.offsetTop) {
             currentHintElement.scrollIntoView(listElement.scrollTop > currentHintElement.offsetTop);
@@ -24,17 +35,25 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi
         event.preventDefault();
         event.stopPropagation();
         currentHintElement.classList.remove(classActiveName);
-        if (!currentHintElement.previousElementSibling) {
-            const length = listElement.children.length;
-            listElement.children[length - 1].classList.add(classActiveName);
-        } else {
-            if (currentHintElement.previousElementSibling.classList.contains(className)) {
-                currentHintElement.previousElementSibling.classList.add(classActiveName);
-            } else {
-                currentHintElement.previousElementSibling.previousElementSibling.classList.add(classActiveName);
+
+        currentHintElement = currentHintElement.previousElementSibling as HTMLElement;
+        while (currentHintElement &&
+        (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) {
+            currentHintElement = currentHintElement.previousElementSibling as HTMLElement;
+        }
+
+        if (!currentHintElement) {
+            currentHintElement = listElement.children[listElement.children.length - 1] as HTMLElement
+            while (currentHintElement &&
+            (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) {
+                currentHintElement = currentHintElement.previousElementSibling as HTMLElement;
             }
         }
-        currentHintElement = listElement.querySelector("." + classActiveName);
+        if (!currentHintElement) {
+            return
+        }
+        currentHintElement.classList.add(classActiveName);
+
         const overTop = listElement.scrollTop > currentHintElement.offsetTop - (currentHintElement.previousElementSibling?.clientHeight || 0);
         if (listElement.scrollTop < currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight || overTop) {
             currentHintElement.scrollIntoView(overTop);