GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | |||||||||||||||||||||||||||||||||||||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | |||||||||||||||||||||||||||||||||||||||||||||||||||
GeezerVison is showing github.com — fix(devtools): claim the inspect click in the capture phase by thedv91 · Pull Request #516 · TanStack/devtools Conversation
|
| Before | After | |
|---|---|---|
A button with an onClick |
source opens, and the button fires too | source opens, the button stays untouched |
| Anything inside a modal or dropdown that stops click propagation | nothing at all — no source, and the button fires | source opens, the button stays untouched |
SourceInspector listened on document in the bubble phase. By then React has already dispatched its synthetic onClick and a router link has already navigated, and preventDefault() cannot undo either — it only cancels the browser's own default action. The second row is the sharper one: an ancestor calling stopPropagation(), which is every overlay that closes on an outside click, stops the event before it reaches document, so the handler never ran and an inspect click inside a modal silently did nothing.
{ capture: true } fixes both, and costs the page nothing: the handler returns immediately unless the hotkey is held over an element carrying data-tsd-source, and it already performs the open-in-editor or copy itself rather than relying on anything downstream.
Still open, and out of scope here: mousedown/pointerdown are untouched, so a drag or focus wired to those still starts on an inspect click.
Verification — examples/react/basic, with a throwaway component holding a plain <button onClick> and a button inside a <div> whose native click listener calls stopPropagation(). On main, an inspect click on the plain button copied …/inspect-click-repro.tsx:35:7 and took its counter 1 → 2; the same click inside the modal took that counter 1 → 2 and copied nothing. With this change both copied their path and neither counter moved, while ordinary clicks without the hotkey still increment both. source-inspector.test.tsx pins the modal case; it fails on main.
pnpm test:pr.
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository: TanStack/devtools/.coderabbit.yaml Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (2)
Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review. 📝 WalkthroughWalkthroughThe source inspector now handles clicks during the document capture phase and uses configured or default source URLs. Tests cover propagation-stopping ancestors and ordinary clicks without the inspection hotkey. A patch changeset documents the update. ChangesSource inspection click handling
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant document
participant SourceInspector
participant Ancestor
User->>document: Click inspected element
document->>SourceInspector: Invoke onInspectClick during capture
SourceInspector->>SourceInspector: Build source URL and fetch
SourceInspector-->>document: Prevent inspected click from reaching target listener
User->>document: Click without inspection hotkey
document->>Ancestor: Dispatch ordinary click
Suggested reviewers: Merge Risk: ⚪ Minimal · up to No actionable issue remains in the reviewed capture-phase change; it is ready to merge after normal checks. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
de3c8dd to
153a720
Compare
There was an error while loading. Please reload this page.
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:eslint,test:sherif,t... |
❌ Failed | 2m 21s | View ↗ |
nx run-many --target=test:e2e --parallel=1 --pr... |
✅ Succeeded | 1m 16s | View ↗ |
nx run-many --targets=build --exclude=examples/... |
✅ Succeeded | 34s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-08-24 16:30:52 UTC
Sorry, something went wrong.
There was an error while loading. Please reload this page.
More templates
@tanstack/angular-devtools
@tanstack/devtools
@tanstack/devtools-a11y
@tanstack/devtools-bundler-core
@tanstack/devtools-client
@tanstack/devtools-rspack
@tanstack/devtools-ui
@tanstack/devtools-utils
@tanstack/devtools-vite
@tanstack/devtools-event-bus
@tanstack/devtools-event-client
@tanstack/preact-devtools
@tanstack/react-devtools
@tanstack/solid-devtools
@tanstack/svelte-devtools
@tanstack/vue-devtools
commit: |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
153a720 to
dbd66b8
Compare
The source inspector listened for clicks in the bubble phase, so by the time it ran the page had already acted on the click: React had dispatched its synthetic onClick, a router link had navigated. preventDefault() cancels only the browser's own default action, so none of that could be undone. Worse, any ancestor calling stopPropagation() -- a modal or dropdown that closes on an outside click -- stopped the event before it reached document, so inspecting inside one silently did nothing at all. Claiming the click in the capture phase fixes both. It costs the page nothing: the handler returns immediately unless the inspect hotkey is held over an element carrying data-tsd-source, and it already performs the open-in-editor or copy itself.
dbd66b8 to
9d8b0e6
Compare
|
@AlemTuzlak thanks for the approval in August. The run on that commit failed on The workflows for |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
Successfully merging this pull request may close these issues.
There was an error while loading. Please reload this page.