query
query copied to clipboard
TanStack
It is hard to change the position of ReactQuery Devtools
Describe the bug
As the gif show, when I hover over the position button, a secondary menu appears. But when I try to move my mouse to the secondary menu, it disappears immediately. This makes it impossible to change the position of devtools.
Your minimal, reproducible example
https://
Steps to reproduce
- Click the bottom right button to open Tanstack query devtools
- Click the settings button
- Hover the position button to show the secondary menu
- Hover the secondary menu
Expected behavior
When hover the secondary menu, the menu keeps appearing and I can set the position
How often does this bug happen?
Every time
Screenshots or Videos
Platform
OS: macOS Browser: Chrome Version: v136
Tanstack Query adapter
None
TanStack Query version
v5.68.0
TypeScript version
No response
Additional context
No response
this works fine for me:
https://github.com/user-attachments/assets/2ffbffb9-2e9b-45f6-bf73-c7b9f96c868c
I can kinda reproduce this. Similar config (macOS, Chrome v137). You need to move your mouse pointer really fast to reproduce this. It's difficult to reproduce with a trackpad, I'm assuming the issue might only appear on systems configured with a high mouse movement speed, perhaps people using large monitors?
https://github.com/user-attachments/assets/ebf671b9-2b6c-4907-955f-12c6951ee9d6
You need to just move your pointer slower to make it work as expected.
@TkDodo it doesn't work every time, there is a noticeable change when the browser devtools are also open:
Sorry, I’m not going to work on this. Feel free to open a PR to improve it if you want. Alternatively:
- set the
positionyou prefer programmatically when rendering the devtools: https://github.com/TanStack/query/blob/56c24f974ebd6796cee22a57fb85231a6b1b5649/packages/react-query-devtools/src/ReactQueryDevtools.tsx#L23-L28 - pop out the devtools to their own window
- move your mouse slower
- use the keyboard to interact with the menu