Hide devtools when closed, prevent focus

[IanVS]

Fixes #2375.

Previously, opening and closing the devtools only changed it opacity (and subscribed/unsubscribed to queries). That meant that it was still possible to tab through the elements in the panel, even when it was closed.

With this change, when the panel starts out closed, we set a visibility: hidden style, so that it is gone from both the accessibility tree and the tab order. I've also set up transition listeners so that before a transition starts, if the devtools are opening, we turn visibility to visible, so that the opacity fade-in works correctly. Likewise, on a transition end, we check if the panel is closed, and turn visibility to hidden.

I tested this by compiling, copying the built files into my project's node_modules, and running my app, and it worked as I expected. The fade still occurs (both in and out), focus does not move into a closed devtools, and the devtools are hidden in the accessibility tree.

This probably would have been more straightforward with a keyframe animation, but I am not sure how to do that using inline styles, or whether its even possible.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tannerlinsley/react-query/EMHjfN3HuJqW2qhZrXdmEUCt2MJe
✅ Preview: https://react-query-git-fork-ianvs-hide-devtools-w-0cef79-tannerlinsley.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4386d67:

Sandbox	Source
tannerlinsley/react-query: basic	Configuration
tannerlinsley/react-query: basic-typescript	Configuration

[IanVS]

Oh cool, you can see it working in the codesandbox as well. I haven't seen a github codesandbox bot before, that's pretty nifty!

[TkDodo]

One of the best bots :)

[TkDodo]

Thank you 👍 . I've tested this in the codesandbox, and it looks good. While testing, I found a semi-related issue that I probably introduced when I made the devtools unsubscribe when they are hidden:

• go to the codesandbox
• open the devtools
• see that you have the posts query there
• close the devtools
• navigate to one post
• open the devtools again
  --> observe that you still only have one query (the posts) query in the panel
• trigger a refetch (e.g. window focus)
• second query appears

I think this happens because we put the queries into local state:

https://github.com/tannerlinsley/react-query/blob/ff830db831f89ba7cebe66cf8c23ca218bdb3643/src/devtools/devtools.tsx#L339-L341

and then update in the effect when we are subscribed:

https://github.com/tannerlinsley/react-query/blob/ff830db831f89ba7cebe66cf8c23ca218bdb3643/src/devtools/devtools.tsx#L382

but since the update happens when we are closed, the component only re-renders when we open it and thus it still has the old queries in the local state.

---

one way to fix it is to really unmount when we close and mount again, because it would pick up the initial state of useState again. Another one would be to sync the state in a separate effect, calling setUnsortedQueries with the current value of what's in the query cache whenever isOpen changes. We could also pass isOpen as a key to the ReactQueryDevtoolsPanel which would make it unmount whenever that value changes. Not sure how that would work with the animation though, we'd have to try.

---

I understand if you don't want to tackle this at all, and we can open a separate issue as well. But if we decide to go for the unmount/remount solution because of this finding, I would rather not add the visibility change now just to remove it then. What do you think?

[IanVS]

If we unmount/mount, we would lose other local state like filtering and such. Is that acceptable?

If we want to keep that state, it sounds like your suggested approach would be to:

sync the state in a separate effect, calling setUnsortedQueries with the current value of what's in the query cache whenever isOpen changes.

Are there any downsides to that approach? It sounds relatively straightforward, and I can try it out here if you'd like.

P.S. Good catch!

[TkDodo]

It sounds relatively straightforward, and I can try it out here if you'd like.

cool, go ahead 😊

[IanVS]

I believe I've fixed the stale queries, but just realized I've introduced a regression. Opening the devtools and refreshing the page results in a close button but a missing panel. I'll work on fixing that now...

[IanVS]

Alright, I think I've taken care of that too. Should be ready for another set of 👀 . Thanks!

[TkDodo]

great work, thanks 🚀

[tannerlinsley]

🎉 This PR is included in version 3.17.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀