From d08ffd8f419091aaf059e2dbd61d7a5f05938d79 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 10 Apr 2024 22:01:21 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/10829

---
 app/src/protyle/render/av/select.ts | 12 ++----------
 app/src/util/upDownHint.ts          |  7 ++++++-
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts
index 7742fa8ca..57fb025c8 100644
--- a/app/src/protyle/render/av/select.ts
+++ b/app/src/protyle/render/av/select.ts
@@ -17,13 +17,12 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
             selected.push(item.dataset.content);
         });
     }
-    const checkedName = document.querySelector('.av__panel .b3-menu__item--current[data-type="addColOptionOrCell"]')?.getAttribute("data-name") || "";
     if (options) {
         options.forEach(item => {
             if (!key ||
                 (key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
                     item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
-                html += `<button data-type="addColOptionOrCell" class="b3-menu__item${checkedName === item.name ? " b3-menu__item--current" : ""}" data-name="${item.name}" draggable="true" data-color="${item.color}">
+                html += `<button data-type="addColOptionOrCell" class="b3-menu__item" data-name="${item.name}" draggable="true" data-color="${item.color}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">
         <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
@@ -40,7 +39,6 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
         });
     }
     if (!hasMatch && key) {
-        html = html.replace('class="b3-menu__item b3-menu__item--current"', 'class="b3-menu__item"');
         const colorIndex = (options?.length || 0) % 13 + 1;
         html = `<button data-type="addColOptionOrCell" class="b3-menu__item b3-menu__item--current" data-name="${key}" data-color="${colorIndex}">
 <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
@@ -51,12 +49,6 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
 </div>
 <span class="b3-menu__accelerator">Enter</span>
 </button>${html}`;
-    } else if (html.indexOf("b3-menu__item--current") === -1) {
-        if (key) {
-            html = html.replace(`class="b3-menu__item" data-name="${key}"`, `class="b3-menu__item b3-menu__item--current" data-name="${key}"`);
-        } else {
-            html = html.replace('class="b3-menu__item"', 'class="b3-menu__item b3-menu__item--current"');
-        }
     }
     return html;
 };
@@ -423,7 +415,7 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
         if (event.isComposing) {
             return;
         }
-        let currentElement = upDownHint(listElement, event, "b3-menu__item--current");
+        let currentElement = upDownHint(listElement, event, "b3-menu__item--current", listElement.firstElementChild);
         if (event.key === "Enter") {
             if (!currentElement) {
                 currentElement = menuElement.querySelector(".b3-menu__item--current");
diff --git a/app/src/util/upDownHint.ts b/app/src/util/upDownHint.ts
index 83e613376..01cdb5b5b 100644
--- a/app/src/util/upDownHint.ts
+++ b/app/src/util/upDownHint.ts
@@ -2,8 +2,13 @@ const isNormalItem = (currentHintElement: HTMLElement, className: string) => {
     return currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className);
 };
 
-export const upDownHint = (listElement: Element, event: KeyboardEvent, classActiveName = "b3-list-item--focus") => {
+export const upDownHint = (listElement: Element, event: KeyboardEvent, classActiveName = "b3-list-item--focus", defaultElement?: Element) => {
     let currentHintElement: HTMLElement = listElement.querySelector("." + classActiveName);
+    if (!currentHintElement && defaultElement) {
+        defaultElement.classList.add(classActiveName);
+        defaultElement.scrollIntoView(true);
+        return;
+    }
     if (!currentHintElement) {
         return;
     }