Repository navigation
Incorrect interaction with html dialog #369
Description
TanStack Devtools version
v0.9.9
Framework/Library version
React 19.2.3
Describe the bug and the steps to reproduce it
Devtools does not interact well with Html's dialog element.
A dialog anywhere in the DOM will take precedence in the element stack, regardless of z-index. This means that when a dialog is open, both the trigger and panel of the devtools will become inaccessible.
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
Render a <dialog open>Something</dialog> in a page with devtools and devtools can no longer be interacted with.
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
No, because I do not know how
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Activity
github-actions commentedon Mar 5, 2026
Thanks for filing this issue! The bug description is clear —
<dialog>elements creating a top layer that blocks interaction with the devtools panel makes sense.However, the Minimal, Reproducible Example field requires a link to a runnable sandbox (e.g. CodeSandbox, StackBlitz), not a text description. Could you provide one? You can fork one of the official examples and add a
<dialog open>to demonstrate the problem.A working reproduction will help the maintainers investigate and fix this much faster. Thanks!
harry-whorlow commentedon Mar 19, 2026
Hi @andresdsep, do you have any suggestions on how we should fix this? if we exposed an zIndex prop allowing you to modify the zIndex, would that solve it?
andresdsep commentedon Mar 19, 2026
As I mentioned,
dialogsupercedesz-index, so that wouldn't help. In my view, the only way to work withdialogwould be for devtools to render adialogitself.Perhaps it could do so on an "opt-in" basis. So an optional prop on
TanStackDevtoolslikerenderAsDialog, so a consumer isn't forced into this newer API.