Repository navigation
Incorrect interaction with html dialog #369
Description
Activity
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!
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?
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.
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
dialoganywhere in the DOM will take precedence in the element stack, regardless ofz-index. This means that when adialogis 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