diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 4aa5ed9cb..07e11ab62 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -97,6 +97,8 @@
 
     .b3-text-field {
       transition: var(--b3-width-transition);
+      overflow-x: hidden;
+      outline: none;
     }
   }
 
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index 04173584e..8a62aba76 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -259,7 +259,7 @@ export const getGroupTitleHTML = (group: IAVView, counter: number) => {
 const renderGroupTable = (options: ITableOptions) => {
     const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
     const isSearching = searchInputElement && document.activeElement === searchInputElement;
-    const query = searchInputElement?.value || "";
+    const query = searchInputElement?.textContent || "";
 
     let avBodyHTML = "";
     options.data.view.groups.forEach((group: IAVTable) => {
@@ -387,8 +387,8 @@ const afterRenderTable = (options: ITableOptions) => {
         return;
     }
     const viewsElement = options.blockElement.querySelector(".av__views") as HTMLElement;
-    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
-    searchInputElement.value = options.resetData.query || "";
+    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLElement;
+    searchInputElement.textContent = options.resetData.query || "";
     if (options.resetData.isSearching) {
         searchInputElement.focus();
     }
@@ -406,7 +406,7 @@ const afterRenderTable = (options: ITableOptions) => {
         if (event.isComposing) {
             return;
         }
-        if (searchInputElement.value || document.activeElement === searchInputElement) {
+        if (searchInputElement.textContent || document.activeElement === searchInputElement) {
             viewsElement.classList.add("av__views--show");
         } else {
             viewsElement.classList.remove("av__views--show");
@@ -420,7 +420,7 @@ const afterRenderTable = (options: ITableOptions) => {
         if (event.isComposing) {
             return;
         }
-        if (!searchInputElement.value) {
+        if (!searchInputElement.textContent) {
             viewsElement.classList.remove("av__views--show");
             searchInputElement.style.width = "0";
             searchInputElement.style.paddingLeft = "0";
@@ -532,7 +532,7 @@ export const avRender = async (element: Element, protyle: IProtyle, cb?: (data:
             selectRowIds,
             dragFillId,
             activeIds,
-            query: searchInputElement?.value || "",
+            query: searchInputElement?.textContent || "",
             pageSizes
         };
         if (e.firstElementChild.innerHTML === "") {
diff --git a/app/src/util/addClearButton.ts b/app/src/util/addClearButton.ts
index 5b0dbe568..32520a113 100644
--- a/app/src/util/addClearButton.ts
+++ b/app/src/util/addClearButton.ts
@@ -1,5 +1,12 @@
-const update = (inputElement: HTMLInputElement, clearElement: Element, right: number) => {
-    if (inputElement.value === "") {
+const update = (inputElement: HTMLElement, clearElement: Element, right: number) => {
+    let value = "";
+    if (inputElement.tagName === "DIV") {
+        value = inputElement.textContent;
+    } else {
+        value = (inputElement as HTMLInputElement).value;
+    }
+
+    if (value === "") {
         clearElement.classList.add("fn__none");
         if (typeof right === "number") {
             inputElement.style.paddingRight = inputElement.dataset.oldPaddingRight;
@@ -12,7 +19,7 @@ const update = (inputElement: HTMLInputElement, clearElement: Element, right: nu
     }
 };
 export const addClearButton = (options: {
-    inputElement: HTMLInputElement,
+    inputElement: HTMLElement,
     clearCB?: () => void,
     right?: number,
     width?: string,
@@ -25,7 +32,11 @@ export const addClearButton = (options: {
 <use xlink:href="#iconCloseRound"></use></svg>`);
     const clearElement = options.inputElement.nextElementSibling;
     clearElement.addEventListener("click", () => {
-        options.inputElement.value = "";
+        if (options.inputElement.tagName === "DIV") {
+            options.inputElement.textContent = "";
+        } else {
+            (options.inputElement as HTMLInputElement).value = "";
+        }
         options.inputElement.focus();
         update(options.inputElement, clearElement, options.right);
         if (options.clearCB) {