diff --git a/packages/web/src/datagrid/ColumnManager.svelte b/packages/web/src/datagrid/ColumnManager.svelte
index ef6ad6256..7df2a2a70 100644
--- a/packages/web/src/datagrid/ColumnManager.svelte
+++ b/packages/web/src/datagrid/ColumnManager.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { GridDisplay } from 'dbgate-datalib';
   import { filterName } from 'dbgate-tools';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
 
   import InlineButton from '../elements/InlineButton.svelte';
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
@@ -21,6 +22,7 @@
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search columns" bind:value={filter} />
+  <CloseSearchButton bind:filter />
   {#if isDynamicStructure && !isJsonView}
     <InlineButton
       on:click={() => {
diff --git a/packages/web/src/datagrid/ReferenceManager.svelte b/packages/web/src/datagrid/ReferenceManager.svelte
index cb0b5b0dd..0e14c33e9 100644
--- a/packages/web/src/datagrid/ReferenceManager.svelte
+++ b/packages/web/src/datagrid/ReferenceManager.svelte
@@ -2,6 +2,7 @@
   import { GridDisplay } from 'dbgate-datalib';
   import { filterName } from 'dbgate-tools';
   import { createEventDispatcher } from 'svelte';
+import CloseSearchButton from '../elements/CloseSearchButton.svelte';
 
   import InlineButton from '../elements/InlineButton.svelte';
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
@@ -26,6 +27,7 @@
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search references" bind:value={filter} />
+  <CloseSearchButton bind:filter />
 </SearchBoxWrapper>
 <ManagerInnerContainer width={managerSize}>
   {#if foreignKeys.length > 0}
diff --git a/packages/web/src/elements/CloseSearchButton.svelte b/packages/web/src/elements/CloseSearchButton.svelte
index f3d5a7178..811afc7d6 100644
--- a/packages/web/src/elements/CloseSearchButton.svelte
+++ b/packages/web/src/elements/CloseSearchButton.svelte
@@ -7,7 +7,13 @@
 </script>
 
 {#if filter}
-  <InlineButton on:click={() => (filter = '')} title="Clear filter">
+  <InlineButton
+    on:click
+    on:click={() => {
+      filter = '';
+    }}
+    title="Clear filter"
+  >
     <FontIcon icon="icon close" />
   </InlineButton>
 {/if}
diff --git a/packages/web/src/widgets/QueryHistoryList.svelte b/packages/web/src/widgets/QueryHistoryList.svelte
index 398fda4d4..b419661e9 100644
--- a/packages/web/src/widgets/QueryHistoryList.svelte
+++ b/packages/web/src/widgets/QueryHistoryList.svelte
@@ -10,6 +10,7 @@
   import socket from '../utility/socket';
   import axiosInstance from '../utility/axiosInstance';
   import openNewTab from '../utility/openNewTab';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
 
   let filter = '';
   let search = '';
@@ -43,11 +44,16 @@
       socket.off('query-history-changed', reloadItems);
     };
   });
-
 </script>
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search query history" {filter} bind:value={filter} />
+  <CloseSearchButton
+    bind:filter
+    on:click={() => {
+      search = '';
+    }}
+  />
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
   {#each historyItems as item}
@@ -98,5 +104,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
 </style>