diff --git a/packages/react-query-devtools/src/__tests__/devtools.test.tsx b/packages/react-query-devtools/src/__tests__/devtools.test.tsx
index 543ffb4c59..be0150f3b3 100644
--- a/packages/react-query-devtools/src/__tests__/devtools.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/devtools.test.tsx
@@ -4,7 +4,7 @@ import { ErrorBoundary } from 'react-error-boundary'
import '@testing-library/jest-dom'
import type { QueryClient } from '@tanstack/react-query'
import { useQuery } from '@tanstack/react-query'
-import { sortFns } from '../utils'
+import { defaultPanelSize, sortFns } from '../utils'
import {
getByTextContent,
renderWithClient,
@@ -36,6 +36,7 @@ Object.defineProperty(window, 'matchMedia', {
describe('ReactQueryDevtools', () => {
beforeEach(() => {
localStorage.removeItem('reactQueryDevtoolsOpen')
+ localStorage.removeItem('reactQueryDevtoolsPanelPosition')
})
it('should be able to open and close devtools', async () => {
const { queryClient } = createQueryClient()
@@ -863,4 +864,55 @@ describe('ReactQueryDevtools', () => {
expect(panel.style.width).toBe('500px')
expect(panel.style.height).toBe('100vh')
})
+
+ it('should restore parent element padding after closing', async () => {
+ const { queryClient } = createQueryClient()
+
+ function Page() {
+ const { data = 'default' } = useQuery(['check'], async () => 'test')
+
+ return (
+
+
{data}
+
+ )
+ }
+
+ const parentElementTestid = 'parentElement'
+ const parentPaddings = {
+ paddingTop: '428px',
+ paddingBottom: '39px',
+ paddingLeft: '-373px',
+ paddingRight: '20%',
+ }
+
+ function Parent({ children }: { children: React.ReactElement }) {
+ return (
+
+ {children}
+
+ )
+ }
+
+ renderWithClient(
+ queryClient,
+ ,
+ {
+ initialIsOpen: true,
+ panelPosition: 'bottom',
+ },
+ { wrapper: Parent },
+ )
+
+ const parentElement = screen.getByTestId(parentElementTestid)
+ expect(parentElement).toHaveStyle({
+ paddingTop: '0px',
+ paddingLeft: '0px',
+ paddingRight: '0px',
+ paddingBottom: defaultPanelSize,
+ })
+
+ fireEvent.click(screen.getByRole('button', { name: /^close$/i }))
+ expect(parentElement).toHaveStyle(parentPaddings)
+ })
})
diff --git a/packages/react-query-devtools/src/__tests__/utils.tsx b/packages/react-query-devtools/src/__tests__/utils.tsx
index e5ea0e83e6..197b782afd 100644
--- a/packages/react-query-devtools/src/__tests__/utils.tsx
+++ b/packages/react-query-devtools/src/__tests__/utils.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { render, type RenderOptions } from '@testing-library/react'
import * as React from 'react'
import { ReactQueryDevtools } from '../devtools'
@@ -12,12 +12,14 @@ export function renderWithClient(
client: QueryClient,
ui: React.ReactElement,
devtoolsOptions: Parameters[number] = {},
+ renderOptions?: RenderOptions,
): ReturnType {
const { rerender, ...result } = render(
{ui}
,
+ renderOptions,
)
return {
...result,
diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index 7d6d0fcc4e..2172170322 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -247,26 +247,37 @@ export function ReactQueryDevtools({
}, [isResolvedOpen])
React.useEffect(() => {
- if (isResolvedOpen) {
- const root = rootRef.current
+ if (isResolvedOpen && rootRef.current?.parentElement) {
+ const { parentElement } = rootRef.current
const styleProp = getSidedProp('padding', panelPosition)
const isVertical = isVerticalSide(panelPosition)
- const previousValue = root?.parentElement?.style[styleProp]
+
+ const previousPaddings = (({
+ padding,
+ paddingTop,
+ paddingBottom,
+ paddingLeft,
+ paddingRight,
+ }) => ({
+ padding,
+ paddingTop,
+ paddingBottom,
+ paddingLeft,
+ paddingRight,
+ }))(parentElement.style)
const run = () => {
- if (root?.parentElement) {
- // reset the padding
- root.parentElement.style.padding = '0px'
- root.parentElement.style.paddingTop = '0px'
- root.parentElement.style.paddingBottom = '0px'
- root.parentElement.style.paddingLeft = '0px'
- root.parentElement.style.paddingRight = '0px'
- // set the new padding based on the new panel position
-
- root.parentElement.style[styleProp] = `${
- isVertical ? devtoolsWidth : devtoolsHeight
- }px`
- }
+ // reset the padding
+ parentElement.style.padding = '0px'
+ parentElement.style.paddingTop = '0px'
+ parentElement.style.paddingBottom = '0px'
+ parentElement.style.paddingLeft = '0px'
+ parentElement.style.paddingRight = '0px'
+ // set the new padding based on the new panel position
+
+ parentElement.style[styleProp] = `${
+ isVertical ? devtoolsWidth : devtoolsHeight
+ }px`
}
run()
@@ -276,9 +287,12 @@ export function ReactQueryDevtools({
return () => {
window.removeEventListener('resize', run)
- if (root?.parentElement && typeof previousValue === 'string') {
- root.parentElement.style[styleProp] = previousValue
- }
+ Object.entries(previousPaddings).forEach(
+ ([property, previousValue]) => {
+ parentElement.style[property as keyof typeof previousPaddings] =
+ previousValue
+ },
+ )
}
}
}