From c9810df3a5688edad42e9dd4edaa628339fdef38 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Wed, 31 Dec 2025 22:30:06 +0800
Subject: [PATCH 1/3] feat(query-devtools): add clear button to filter input

- Add clear button (X icon) to filter input when text is present
- Button clears filter and automatically refocuses the input
- Works for both queries and mutations views
- Includes hover and focus states for accessibility
- Supports keyboard navigation
---
 packages/query-devtools/src/Devtools.tsx | 50 ++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index cceec7a3de..ba4317b935 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -676,6 +676,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
   setupQueryCacheSubscription()
   setupMutationCacheSubscription()
   let containerRef!: HTMLDivElement
+  let filterInputRef!: HTMLInputElement
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -907,6 +908,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
             >
               <Search />
               <input
+                ref={filterInputRef}
                 aria-label="Filter queries by query key"
                 type="text"
                 placeholder="Filter"
@@ -925,6 +927,29 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                     : props.localStore.mutationFilter || ''
                 }
               />
+              <Show
+                when={
+                  selectedView() === 'queries'
+                    ? props.localStore.filter
+                    : props.localStore.mutationFilter
+                }
+              >
+                <button
+                  aria-label="Clear filter"
+                  class={cx(styles().clearFilterBtn, 'tsqd-clear-filter-btn')}
+                  onClick={() => {
+                    if (selectedView() === 'queries') {
+                      props.setLocalStore('filter', '')
+                    } else {
+                      props.setLocalStore('mutationFilter', '')
+                    }
+                    // Focus back to input after clearing
+                    filterInputRef.focus()
+                  }}
+                >
+                  <XCircle />
+                </button>
+              </Show>
             </div>
             <div
               class={cx(
@@ -3258,6 +3283,31 @@ const stylesFactory = (
         outline: 2px solid ${colors.blue[800]};
       }
     `,
+    clearFilterBtn: css`
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: ${t(colors.gray[500], colors.gray[400])};
+      transition: color 0.2s ease;
+      flex-shrink: 0;
+
+      & > svg {
+        width: ${size[3]};
+        height: ${size[3]};
+      }
+
+      &:hover {
+        color: ${t(colors.gray[700], colors.gray[200])};
+      }
+
+      &:focus-visible {
+        outline: 2px solid ${colors.blue[800]};
+        outline-offset: 2px;
+        border-radius: ${border.radius.xs};
+      }
+    `,
     filterSelect: css`
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       border-radius: ${tokens.border.radius.sm};

From 3804c92ef95bc9292f4134eee5b5b3c14a104de7 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Wed, 31 Dec 2025 22:30:38 +0800
Subject: [PATCH 2/3] chore: add changeset for clear filter button

---
 .changeset/clear-filter-button.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/clear-filter-button.md

diff --git a/.changeset/clear-filter-button.md b/.changeset/clear-filter-button.md
new file mode 100644
index 0000000000..07fade0e31
--- /dev/null
+++ b/.changeset/clear-filter-button.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': minor
+---
+
+Add clear button to filter input for improved UX. The button appears when the filter has text and clears the filter when clicked, automatically refocusing the input field. Works for both queries and mutations views.

From dc611a214f6b7aea70b40e7e5cb195fb9eecb6d4 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Wed, 31 Dec 2025 22:38:35 +0800
Subject: [PATCH 3/3] fix(query-devtools): address code review feedback

- Add explicit type="button" attribute for consistency
- Add user-select: none to prevent icon selection on double-click
---
 packages/query-devtools/src/Devtools.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index ba4317b935..8790237234 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -935,6 +935,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                 }
               >
                 <button
+                  type="button"
                   aria-label="Clear filter"
                   class={cx(styles().clearFilterBtn, 'tsqd-clear-filter-btn')}
                   onClick={() => {
@@ -3285,6 +3286,7 @@ const stylesFactory = (
     `,
     clearFilterBtn: css`
       all: unset;
+      user-select: none;
       display: flex;
       align-items: center;
       justify-content: center;