From 7b1c30bc26b796116e7bd936436b3f9e3e1cb316 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 11 Oct 2023 09:30:13 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/9396

---
 app/src/protyle/toolbar/index.ts | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
index b5d7cec63..a498e65d9 100644
--- a/app/src/protyle/toolbar/index.ts
+++ b/app/src/protyle/toolbar/index.ts
@@ -1155,17 +1155,19 @@ export class Toolbar {
 
         this.subElement.style.width = "";
         this.subElement.style.padding = "";
-        this.subElement.innerHTML = `<div class="fn__flex-column" style="max-height:50vh"><input placeholder="${window.siyuan.languages.search}" style="margin: 0 8px 4px 8px" class="b3-text-field"/>
-<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
+        this.subElement.innerHTML = `<div class="fn__flex-column" style="max-height:50vh">
+    <input placeholder="${window.siyuan.languages.search}" style="margin: 0 8px 4px 8px" class="b3-text-field"/>
+    <div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
 </div>`;
 
+        const listElement = this.subElement.lastElementChild.lastElementChild as HTMLElement
         const inputElement = this.subElement.querySelector("input");
         inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
             event.stopPropagation();
             if (event.isComposing) {
                 return;
             }
-            upDownHint(this.subElement.lastElementChild.lastElementChild as HTMLElement, event);
+            upDownHint(listElement, event);
             if (event.key === "Enter") {
                 const activeText = this.subElement.querySelector(".b3-list-item--focus").textContent;
                 languageElement.textContent = activeText === window.siyuan.languages.clear ? "" : activeText;
@@ -1223,12 +1225,16 @@ export class Toolbar {
             if (inputElement.value.trim() && !matchInput) {
                 html = `<div class="b3-list-item"><b>${inputElement.value.replace(/`| /g, "_")}</b></div>${html}`;
             }
-            html = `<div class="b3-list-item b3-list-item--focus">${window.siyuan.languages.clear}</div>` + html;
-            this.subElement.firstElementChild.lastElementChild.innerHTML = html;
-            this.subElement.firstElementChild.lastElementChild.firstElementChild.classList.add("b3-list-item--focus");
+            html = `<div class="b3-list-item">${window.siyuan.languages.clear}</div>` + html;
+            listElement.innerHTML = html;
+            if ( listElement.firstElementChild.nextElementSibling) {
+                listElement.firstElementChild.nextElementSibling.classList.add("b3-list-item--focus");
+            } else {
+                listElement.firstElementChild.classList.add("b3-list-item--focus");
+            }
             event.stopPropagation();
         });
-        this.subElement.lastElementChild.lastElementChild.addEventListener("click", (event) => {
+        listElement.addEventListener("click", (event) => {
             const target = event.target as HTMLElement;
             const listElement = hasClosestByClassName(target, "b3-list-item");
             if (!listElement) {
@@ -1453,17 +1459,18 @@ export class Toolbar {
         window.siyuan.menus.menu.remove();
         this.subElement.style.width = "";
         this.subElement.style.padding = "";
-        this.subElement.innerHTML = `<div class="fn__flex-column" style="max-height:50vh"><input style="margin: 0 8px 4px 8px" class="b3-text-field"/>
-<div class="b3-list fn__flex-1 b3-list--background" style="position: relative"><img style="margin: 0 auto;display: block;width: 64px;height:64px" src="/stage/loading-pure.svg"></div>
+        this.subElement.innerHTML = `<div class="fn__flex-column" style="max-height:50vh">
+    <input style="margin: 0 8px 4px 8px" class="b3-text-field"/>
+    <div class="b3-list fn__flex-1 b3-list--background" style="position: relative"><img style="margin: 0 auto;display: block;width: 64px;height:64px" src="/stage/loading-pure.svg"></div>
 </div>`;
-
+        const listElement = this.subElement.lastElementChild.lastElementChild as HTMLElement
         const inputElement = this.subElement.querySelector("input");
         inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
             event.stopPropagation();
             if (event.isComposing) {
                 return;
             }
-            upDownHint(this.subElement.lastElementChild.lastElementChild as HTMLElement, event);
+            upDownHint(listElement, event);
             if (event.key === "Enter") {
                 hintRenderWidget(this.subElement.querySelector(".b3-list-item--focus").textContent, protyle);
                 this.subElement.classList.add("fn__none");
@@ -1482,7 +1489,7 @@ export class Toolbar {
                 response.data.blocks.forEach((item: { path: string, content: string }, index: number) => {
                     searchHTML += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.content}</div>`;
                 });
-                this.subElement.firstElementChild.lastElementChild.innerHTML = searchHTML;
+                listElement.innerHTML = searchHTML;
             });
         });
         this.subElement.lastElementChild.addEventListener("click", (event) => {