🎨 fix https://github.com/siyuan-note/siyuan/issues/10932

app/src/protyle/render/av/filter.ts

@@ -10,6 +10,7 @@ import {unicode2Emoji} from "../../../emoji";
 import {openMenuPanel} from "./openMenuPanel";
 import {fetchSyncPost} from "../../../util/fetch";
 import {showMessage} from "../../../dialog/message";
+import {upDownHint} from "../../../util/upDownHint";
 
 export const getDefaultOperatorByType = (type: TAVCol) => {
     if (["select", "number", "date", "created", "updated"].includes(type)) {
@@ -54,6 +55,20 @@ const toggleEmpty = (element: HTMLElement, operator: string, type: TAVCol) => {
     }
 };
 
+const filterSelect = (key: string) => {
+    window.siyuan.menus.menu.element.querySelectorAll(".b3-menu__item").forEach((item) => {
+        const nameElement = item.querySelector(".b3-chip.b3-chip--middle") as HTMLElement
+        if (nameElement) {
+            const itemName = nameElement.dataset.name.toLowerCase()
+            if (!key || (key.indexOf(itemName) > -1 || itemName.indexOf(key) > -1)) {
+                item.classList.remove("fn__none");
+            } else {
+                item.classList.add("fn__none");
+            }
+        }
+    })
+}
+
 export const setFilter = async (options: {
     filter: IAVFilter,
     protyle: IProtyle,
@@ -81,8 +96,22 @@ export const setFilter = async (options: {
         };
         let hasMatch = false;
         let newValue;
-        if (textElements.length > 0) {
+        if (filterValue.type === "select" || filterValue.type === "mSelect") {
-            if (["date", "updated", "created"].includes(filterValue.type)) {
+            const mSelect: {
+                color: string,
+                content: string
+            }[] = [];
+            window.siyuan.menus.menu.element.querySelectorAll("svg").forEach(item => {
+                if (item.firstElementChild.getAttribute("xlink:href") === "#iconCheck") {
+                    const chipElement = item.nextElementSibling.firstElementChild as HTMLElement;
+                    mSelect.push({
+                        color: chipElement.dataset.color,
+                        content: chipElement.dataset.name
+                    });
+                }
+            });
+            newValue = genCellValue(filterValue.type, mSelect);
+        } else if (["date", "updated", "created"].includes(filterValue.type)) {
             const typeElement = menu.element.querySelector('.b3-select[data-type="dateType"]') as HTMLSelectElement;
             const directElements = menu.element.querySelectorAll('.b3-select[data-type="dataDirection"]') as NodeListOf<HTMLSelectElement>;
             if (typeElement.value === "custom") {
@@ -109,24 +138,8 @@ export const setFilter = async (options: {
                 newFilter.relativeDate = null;
                 newFilter.relativeDate2 = null;
             }
-            } else {
+        } else if (["text", "url", "block", "email", "phone", "template", "relation", "number"].includes(filterValue.type)) {
             newValue = genCellValue(filterValue.type, textElements[0].value);
-            }
-        } else if (filterValue.type === "select" || filterValue.type === "mSelect") {
-            const mSelect: {
-                color: string,
-                content: string
-            }[] = [];
-            window.siyuan.menus.menu.element.querySelectorAll("svg").forEach(item => {
-                if (item.firstElementChild.getAttribute("xlink:href") === "#iconCheck") {
-                    const chipElement = item.nextElementSibling.firstElementChild as HTMLElement;
-                    mSelect.push({
-                        color: chipElement.dataset.color,
-                        content: chipElement.dataset.name
-                    });
-                }
-            });
-            newValue = genCellValue(filterValue.type, mSelect);
         } else if (filterValue.type === "checkbox") {
             newValue = genCellValue(filterValue.type, {
                 checked: newFilter.operator === "Is true"
@@ -313,6 +326,37 @@ export const setFilter = async (options: {
         label: `<select style="margin: 4px 0" class="b3-select fn__size200">${selectHTML}</select>`
     });
     if (filterValue.type === "select" || filterValue.type === "mSelect") {
+        if (colData.options?.length > 0) {
+            menu.addItem({
+                iconHTML: "",
+                type: "readonly",
+                label: `<input class="b3-text-field fn__block" style="margin: 4px 0" placeholder="${window.siyuan.languages.search}">`,
+                bind(element) {
+                    const selectSearchElement = element.querySelector("input")
+                    selectSearchElement.addEventListener("keydown", (event: KeyboardEvent) => {
+                        if (event.isComposing) {
+                            return;
+                        }
+                        let currentElement = upDownHint(menu.element.querySelector(".b3-menu__items"), event, "b3-menu__item--current", element.nextElementSibling);
+                        if (event.key === "Enter") {
+                            if (!currentElement) {
+                                currentElement = menu.element.querySelector(".b3-menu__item--current");
+                            }
+                            currentElement.dispatchEvent(new CustomEvent("click"));
+                        }
+                    })
+                    selectSearchElement.addEventListener("input", (event: InputEvent) => {
+                        if (event.isComposing) {
+                            return;
+                        }
+                        filterSelect(selectSearchElement.value.toLowerCase());
+                    })
+                    selectSearchElement.addEventListener("compositionend", () => {
+                        filterSelect(selectSearchElement.value.toLowerCase());
+                    })
+                }
+            })
+        }
         colData.options?.forEach((option) => {
             let icon = "iconUncheck";
             filterValue?.mSelect?.find((optionItem: IAVCellSelectValue) => {
@@ -483,6 +527,7 @@ export const setFilter = async (options: {
     });
 
     const textElements: NodeListOf<HTMLInputElement> = menu.element.querySelectorAll(".b3-text-field");
+    if (filterValue.type !== "select" && filterValue.type !== "mSelect") {
         textElements.forEach(item => {
             item.addEventListener("keydown", (event: KeyboardEvent) => {
                 if (event.isComposing) {
@@ -495,6 +540,7 @@ export const setFilter = async (options: {
                 }
             });
         });
+    }
     toggleEmpty(selectElement, selectElement.value, filterValue.type);
     menu.open({x: rectTarget.left, y: rectTarget.bottom});
     if (textElements.length > 0) {

app/src/protyle/render/av/openMenuPanel.ts

@@ -583,6 +583,7 @@ export const openMenuPanel = (options: {
                     data.view.filters = [];
                     menuElement.innerHTML = getFiltersHTML(data.view);
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
+                    window.siyuan.menus.menu.remove();
                     event.preventDefault();
                     event.stopPropagation();
                     break;

app/src/protyle/render/av/select.ts

@@ -405,10 +405,7 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
         }
         listElement.innerHTML = filterSelectHTML(inputElement.value, colData.options);
     });
-    inputElement.addEventListener("compositionend", (event: InputEvent) => {
+    inputElement.addEventListener("compositionend", () => {
-        if (event.isComposing) {
-            return;
-        }
         listElement.innerHTML = filterSelectHTML(inputElement.value, colData.options);
     });
     inputElement.addEventListener("keydown", (event: KeyboardEvent) => {