fix(ui): keep focus on the filter box after Clear filters by erkamyaman · Pull Request #278 · pangular-inspector/devtools

erkamyaman · 2026-10-11T03:03:58Z

What and why

"Clear filter" / "Clear filters" sit inside the no-match state, so clicking them removed the button and dropped keyboard focus to the page body (WCAG 2.4.3). Components (live and source), Injectors (Clear search and the source Clear filter), Pipes, Signals (live and source) and Store now move focus back to their filter box, matching Routes, Forms and SSR & HTTP.

Every filter box now clears on Escape: Signals, Store, Routes (tree, navigations, source routes), Forms fields and Analog routes. The plain text boxes among them become search boxes like Components and Pipes, so the popup treats Escape there as "clear the box" and keeps the panel open.

The Components and Injectors keyboard notes mention Escape and where focus goes after clearing.

How it was verified

pnpm format:check
pnpm typecheck
pnpm test:panel (37 files, 257 tests); the 17 new tests fail without the page changes
pnpm docs:build
pnpm extension:build, extension/ui committed
axe on every panel view in dark and light (28 of 28 clean)
Browser check on Components, Injectors, Pipes, Signals, Store and Routes at 1280px and 360px, dark and light: no axe violations in the no-match state, Clear leaves focus on the search box, Escape clears, no horizontal overflow
pnpm commit:check

Screenshots

None attached.

Notes for reviewers

Signals: jumping to a hidden dependency still clears the filters but does not take focus, so focus keeps going to the opened card.
Signals, Routes, navigations and source routes filters change from type="text" to type="search". Their styles do not depend on the type.
Escape on Store, Forms fields and Analog routes was added too, so every filter box behaves the same.
Touches di-inspector.ts like feat(injectors): add a page picker to the Injectors tab #276, so whichever merges second needs a small merge.

Summary by CodeRabbit

Usability
- Pressing Escape in filter and search fields now clears the active text filter across inspectors and route views.
- Clear actions restore focus to the relevant search field, making it easier to continue filtering.
- Clearing a filter also restores content hidden by a no-match search.
Documentation
- Updated keyboard guidance to describe Escape-to-clear behavior and focus restoration after clearing filters.

Clear filter and Clear filters sit inside the no-match state, so clearing removed the button and focus fell to the page body (WCAG 2.4.3). Components (live and source), Injectors (Clear search and the source Clear filter), Pipes, Signals (live and source) and Store now move focus back to their filter box, the way Routes, Forms and SSR & HTTP already do. Jumping to a hidden signal node still clears the filters without taking focus. Every filter box now clears on Escape: Signals, Store, the route tree, navigations, source routes, Forms fields and Analog routes gain the handler. The text boxes among them become search boxes, like Components and Pipes, so the popup sees a search box with text and keeps the panel open on that Escape. The Components and Injectors keyboard notes mention Escape and where focus goes after clearing.

coderabbitai · 2026-10-11T03:04:15Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: e8c6f2a8-e20a-4884-8a9a-6c99fc8093e2

📥 Commits

Reviewing files that changed from the base of the PR and between 0312e33 and 20c8a3f.

⛔ Files ignored due to path filters (1)

extension/ui/assets/index-RHlVGXjX.js is excluded by !**/assets/index-[0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-].js

📒 Files selected for processing (9)

app/src/__tests__/di-inspector-pages.test.ts
app/src/__tests__/router-panels.test.ts
app/src/pages/analog-inspector.ts
app/src/pages/di-inspector.ts
app/src/pages/route-timeline.ts
app/src/pages/route-tree.ts
apps/docs/src/content/inspectors/injectors.md
extension/ui/assets/browser-agent-rpc-BXhoSh1z-CFmADKyK.js
extension/ui/index.html

🚧 Files skipped from review as they are similar to previous changes (1)

apps/docs/src/content/inspectors/injectors.md

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 3 remain after this review.

📝 Walkthrough

Walkthrough

Inspector filters now clear with Escape in several views. Clear actions in component, injector, pipe, signal, and store views return focus to the search input. Tests and documentation cover these interactions.

Changes

Inspector filter interactions

Layer / File(s)	Summary
Escape clears search filters `app/src/pages/analog-inspector.ts`, `app/src/pages/forms-inspector.ts`, `app/src/pages/route-inspector.ts`, `app/src/pages/route-timeline.ts`, `app/src/pages/route-tree.ts`, `app/src/pages/signal-inspector.ts`, `app/src/pages/store-inspector.ts`, `app/src/__tests__/analog-inspector-pages.test.ts`, `app/src/__tests__/forms-panels.test.ts`, `app/src/__tests__/router-panels.test.ts`, `app/src/__tests__/signal-inspector.test.ts`, `app/src/__tests__/store-inspector.test.ts`	Escape clears the active filter in route, form, signal, and store search fields. The route timeline and route tree inputs now use search fields. Tests check that filter state and input values clear.
Clear actions restore search focus `app/src/pages/component-tree.ts`, `app/src/pages/di-inspector.ts`, `app/src/pages/pipes-inspector.ts`, `app/src/pages/signal-inspector.ts`, `app/src/pages/store-inspector.ts`, `app/src/__tests__/component-tree-expand.test.ts`, `app/src/__tests__/di-inspector-pages.test.ts`, `app/src/__tests__/pipes-record-page.test.ts`, `app/src/__tests__/signal-inspector.test.ts`, `app/src/__tests__/store-inspector.test.ts`, `apps/docs/src/content/inspectors/components.md`, `apps/docs/src/content/inspectors/injectors.md`, `extension/ui/index.html`, `extension/ui/assets/browser-agent-rpc-BXhoSh1z-CFmADKyK.js`	Clear actions reset filters and return focus to the search input in live and source views. Tests check focus and restored results. Inspector keyboard guidance describes Escape and clear-action behavior. The extension UI references the updated asset name.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 20c8a

The filter-clearing and focus changes appear ready to merge after normal checks.

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 13 functions across 20 files. (2 skipped: …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the primary change: restoring focus to the filter box after clearing filters.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 13 functions across 20 files. (2 skipped: 2 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

cloudflare-workers-and-pages · 2026-10-11T03:04:42Z

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Failed ❌ View logs ↗		`20c8a3f`	2026-10-11T05:30:20.844Z	View logs ↗
Build: Failed ❌ View logs ↗		`0312e33`	2026-10-11T03:04:36.776Z	View logs ↗

The merge with main changed the panel, so the committed bundle is rebuilt to match.

erkamyaman requested a review from santoshyadavdev as a code owner October 11, 2026 03:03

github-actions Bot added area: panel The devtools panel app (app/) area: extension The Chrome extension area: docs The documentation site labels Oct 11, 2026

This was referenced Oct 11, 2026

feat(forms): open the field of a lint finding from its path #279

Merged

feat(analog): add search and failed filter to the server calls list #281

Merged

fix(signals): reset a stale kind filter and forget picks of closed pages #291

Merged

erkamyaman added 3 commits October 11, 2026 05:27

Merge remote-tracking branch 'upstream/main' into ui/clear-filters-focus

2873b90

Merge remote-tracking branch 'upstream/main' into ui/clear-filters-focus

3e0a87c

build(extension): rebuild the panel bundle

20c8a3f

The merge with main changed the panel, so the committed bundle is rebuilt to match.

erkamyaman merged commit 822e16d into main Oct 11, 2026
7 of 8 checks passed

erkamyaman deleted the ui/clear-filters-focus branch October 11, 2026 05:32

Navigation Menu

Repository navigation

fix(ui): keep focus on the filter box after Clear filters - #278

fix(ui): keep focus on the filter box after Clear filters#278
erkamyaman merged 4 commits into
mainfrom
ui/clear-filters-focus

erkamyaman commented Oct 11, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 11, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

cloudflare-workers-and-pages Bot commented Oct 11, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

erkamyaman commented Oct 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What and why

How it was verified

Screenshots

Notes for reviewers

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Oct 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

cloudflare-workers-and-pages Bot commented Oct 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

erkamyaman commented Oct 11, 2026 •

edited

Loading

coderabbitai Bot commented Oct 11, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Oct 11, 2026 •

edited

Loading