feat(query-devtools): add clear button to filter input #10010
Conversation
- 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
🦋 Changeset detectedLatest commit: dc611a2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds a clear button to the filter input in the query devtools that appears when the filter has text, clears the active filter for the current view, and refocuses the input. Also adds a new public style token for the button and a changelog entry with a minor version bump. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/query-devtools/src/Devtools.tsx (1)
937-937: Add explicittype="button"attribute for consistency.While the button isn't in a form context and unlikely to cause issues, other buttons in this file explicitly set
type="button"(e.g., lines 266, 658, 835). Adding it here maintains consistency with the codebase pattern and follows defensive coding best practices.🔎 Suggested fix
<button + type="button" aria-label="Clear filter" class={cx(styles().clearFilterBtn, 'tsqd-clear-filter-btn')}
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.changeset/clear-filter-button.mdpackages/query-devtools/src/Devtools.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
Applied to files:
packages/query-devtools/src/Devtools.tsx
🧬 Code graph analysis (1)
packages/query-devtools/src/Devtools.tsx (1)
packages/query-devtools/src/icons/index.tsx (1)
XCircle(481-499)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Agent
🔇 Additional comments (2)
packages/query-devtools/src/Devtools.tsx (1)
679-679: LGTM! Well-implemented clear button feature.The clear button implementation is solid and meets all the requirements from the PR objectives:
- ✓ Properly wired input ref for focus management
- ✓ Conditional rendering based on filter presence
- ✓ Clears the correct filter based on current view (queries vs mutations)
- ✓ Automatically refocuses the input after clearing
- ✓ Accessible with aria-label for screen readers
- ✓ Native button keyboard support (Tab/Enter/Space)
- ✓ Theme-aware styling with hover and focus states
- ✓ Icon properly sized and positioned
The focus management pattern (clearing then refocusing) provides excellent UX, and the conditional logic correctly mirrors the input's value logic.
Also applies to: 911-911, 930-952, 3286-3310
.changeset/clear-filter-button.md (1)
1-5: LGTM! Clear and accurate changelog entry.The changelog appropriately documents the new feature with a minor version bump and provides a concise description of the functionality. The description accurately reflects the implementation.
There was a problem hiding this comment.
Pull request overview
This PR adds a clear button to the filter input in the query devtools, enhancing the user experience by providing a quick way to reset filters without manually deleting text. The implementation includes proper accessibility support, theme-aware styling, and automatic input refocusing after clearing.
Key Changes:
- Added a clear button (X icon) that appears conditionally when filter text is present
- Implemented focus management to return focus to the input after clearing
- Added theme-aware styling with hover and focus states for the clear button
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
packages/query-devtools/src/Devtools.tsx |
Added filterInputRef, clear button with XCircle icon in Show component, click handler to clear filters and refocus input, and styling for clearFilterBtn with accessibility support |
.changeset/clear-filter-button.md |
Added changeset documenting the new feature as a minor version bump |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add explicit type="button" attribute for consistency - Add user-select: none to prevent icon selection on double-click
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/query-devtools/src/Devtools.tsx (1)
930-953: Well-implemented clear button with good UX and accessibility.The implementation correctly:
- Conditionally renders based on filter presence for both views
- Includes
type="button"to prevent form submission- Provides proper
aria-labelfor screen readers- Clears the appropriate filter based on the current view
- Refocuses the input after clearing
Optional: Consider defensive coding for the focus call
For extra safety, you could use optional chaining when calling
focus():- filterInputRef.focus() + filterInputRef?.focus()While the ref should always be set when the button is clicked (since the input renders first), optional chaining provides an extra safeguard against potential race conditions.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/query-devtools/src/Devtools.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
Applied to files:
packages/query-devtools/src/Devtools.tsx
🧬 Code graph analysis (1)
packages/query-devtools/src/Devtools.tsx (1)
packages/query-devtools/src/icons/index.tsx (1)
XCircle(481-499)
🔇 Additional comments (2)
packages/query-devtools/src/Devtools.tsx (2)
679-679: LGTM! Ref declaration is correct.The
filterInputRefis properly typed asHTMLInputElementand follows standard SolidJS ref patterns.
3287-3312: LGTM! Clear button styles are well-crafted and theme-aware.The styling implementation:
- Uses
all: unsetwith explicit property restoration (intentional pattern)- Includes
user-select: noneto prevent icon selection on double-click (addresses previous review feedback)- Provides theme-aware hover and focus states
- Has proper keyboard focus indicators with
focus-visible- Uses
flex-shrink: 0to maintain button sizeThe styles integrate well with the existing design system and maintain accessibility standards.
1 participant
Motivation
The current filter input requires manually deleting text to clear the filter, which is not user-friendly. Adding a clear button provides a faster and more convenient way to reset the filter.
Changes
aria-labelfor screen readersTesting
User Experience Flow
Screenshots
Checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.