Wait until after a layout effect to prevent scroll in popovers (#3697)

Author: devongovett

packages/@react-aria/overlays/src/usePopover.ts

@@ -17,7 +17,7 @@ import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {OverlayContext} from './Overlay';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import {PlacementAxis} from '@react-types/overlays';
-import {RefObject, useContext} from 'react';
+import {RefObject, useContext, useState} from 'react';
 import {useOverlay} from './useOverlay';
 import {usePreventScroll} from './usePreventScroll';
 
@@ -89,10 +89,19 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     overlayRef: popoverRef,
     isOpen: state.isOpen
   });
-  
+
+  // Delay preventing scroll until popover is positioned to avoid extra scroll padding.
+  // This requires a layout effect so that positioning has been committed to the DOM
+  // by the time usePreventScroll measures the element.
+  let [isPositioned, setPositioned] = useState(false);
+  useLayoutEffect(() => {
+    if (!isNonModal && placement) {
+      setPositioned(true);
+    }
+  }, [isNonModal, placement]);
+
   usePreventScroll({
-    // Delay preventing scroll until popover is positioned to avoid extra scroll padding.
-    isDisabled: isNonModal || !placement
+    isDisabled: isNonModal || !isPositioned
   });
 
   useLayoutEffect(() => {