diff --git a/packages/@react-aria/utils/src/useViewportSize.ts b/packages/@react-aria/utils/src/useViewportSize.ts index ed6f6f765e5..b98ae0fc4e9 100644 --- a/packages/@react-aria/utils/src/useViewportSize.ts +++ b/packages/@react-aria/utils/src/useViewportSize.ts @@ -57,7 +57,7 @@ export function useViewportSize(): ViewportSize { // Wait one frame to see if a new element gets focused. frame = requestAnimationFrame(() => { if (!document.activeElement || !willOpenKeyboard(document.activeElement)) { - updateSize({width: window.innerWidth, height: window.innerHeight}); + updateSize({width: document.documentElement.clientWidth, height: document.documentElement.clientHeight}); } }); } @@ -90,7 +90,7 @@ export function useViewportSize(): ViewportSize { function getViewportSize(): ViewportSize { return { // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming. - width: visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth, - height: visualViewport ? visualViewport.height * visualViewport.scale : window.innerHeight + width: visualViewport ? visualViewport.width * visualViewport.scale : document.documentElement.clientWidth, + height: visualViewport ? visualViewport.height * visualViewport.scale : document.documentElement.clientHeight }; } diff --git a/scripts/setupTests.js b/scripts/setupTests.js index 9565be18aec..fedbf8c0bd3 100644 --- a/scripts/setupTests.js +++ b/scripts/setupTests.js @@ -104,8 +104,24 @@ beforeEach(() => { disconnect: () => null }); window.IntersectionObserver = mockIntersectionObserver; + + // Set document.documentElement dimensions to match jsdom's default window.innerWidth/innerHeight + // This is needed because clientWidth/clientHeight default to 0 in jsdom unless explicitly set + Object.defineProperty(document.documentElement, 'clientWidth', { + writable: true, + configurable: true, + value: 1024 + }); + Object.defineProperty(document.documentElement, 'clientHeight', { + writable: true, + configurable: true, + value: 768 + }); }); afterEach(() => { delete window.IntersectionObserver; + // Clean up the clientWidth/clientHeight properties + delete document.documentElement.clientWidth; + delete document.documentElement.clientHeight; });