@react-aria/overlays 3.0.0-nightly.1979 → 3.0.0-nightly.1985

package/src/useOverlayPosition.ts

@@ -115,20 +115,26 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       return;
     }
 
-    setPosition(
-      calculatePosition({
-        placement: translateRTL(placement, direction),
-        overlayNode: overlayRef.current,
-        targetNode: targetRef.current,
-        scrollNode: scrollRef.current,
-        padding: containerPadding,
-        shouldFlip,
-        boundaryElement,
-        offset,
-        crossOffset,
-        maxHeight
-      })
-    );
+    let position = calculatePosition({
+      placement: translateRTL(placement, direction),
+      overlayNode: overlayRef.current,
+      targetNode: targetRef.current,
+      scrollNode: scrollRef.current,
+      padding: containerPadding,
+      shouldFlip,
+      boundaryElement,
+      offset,
+      crossOffset,
+      maxHeight
+    });
+
+    // Modify overlay styles directly so positioning happens immediately without the need of a second render
+    // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
+    Object.keys(position.position).forEach(key => (overlayRef.current as HTMLElement).style[key] = position.position[key] + 'px');
+    (overlayRef.current as HTMLElement).style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : undefined;
+
+    // Trigger a set state for a second render anyway for arrow positioning
+    setPosition(position);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 

package/src/usePopover.ts

@@ -16,7 +16,7 @@ import {DOMAttributes} from '@react-types/shared';
 import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import {PlacementAxis} from '@react-types/overlays';
-import {RefObject, useState} from 'react';
+import {RefObject} from 'react';
 import {useOverlay} from './useOverlay';
 import {usePreventScroll} from './usePreventScroll';
 
@@ -92,18 +92,8 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     onClose: null
   });
 
-  // 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({
-    isDisabled: isNonModal || !isPositioned
+    isDisabled: isNonModal
   });
 
   useLayoutEffect(() => {