fix: Overlay positioning with collection double render (adobe#8757)

* fix: Overlay positioning with collection double render

* fix menu wiggle due to usePreventScroll and delayed positioning

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: devongovett

packages/@react-aria/collections/src/BaseCollection.ts

@@ -142,6 +142,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
   private lastKey: Key | null = null;
   private frozen = false;
   private itemCount: number = 0;
+  isComplete = true;
 
   get size(): number {
     return this.itemCount;

packages/@react-aria/collections/src/CollectionBuilder.tsx

@@ -116,6 +116,7 @@ function useCollectionDocument<T extends object, C extends BaseCollection<T>>(cr
   let collection = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   useLayoutEffect(() => {
     document.isMounted = true;
+    document.isInitialRender = false;
     return () => {
       // Mark unmounted so we can skip all of the collection updates caused by
       // React calling removeChild on every item in the collection.

packages/@react-aria/collections/src/Document.ts

@@ -416,6 +416,7 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
   nodeId = 0;
   nodesByProps: WeakMap<object, ElementNode<T>> = new WeakMap<object, ElementNode<T>>();
   isMounted = true;
+  isInitialRender = true;
   private collection: C;
   private nextCollection: C | null = null;
   private subscriptions: Set<() => void> = new Set();
@@ -522,6 +523,10 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
         this.nextCollection = null;
       }
     }
+
+    if (this.isInitialRender) {
+      this.collection.isComplete = false;
+    }
   }
 
   queueUpdate(): void {

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

@@ -149,6 +149,11 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       return;
     }
 
+    // Delay updating the position until children are finished rendering (e.g. collections).
+    if (overlayRef.current.querySelector('[data-react-aria-incomplete]')) {
+      return;
+    }
+
     // Don't update while the overlay is animating.
     // Things like scale animations can mess up positioning by affecting the overlay's computed size.
     if (overlayRef.current.getAnimations?.().length > 0) {
@@ -294,7 +299,9 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
   return {
     overlayProps: {
       style: {
-        position: 'absolute',
+        position: position ? 'absolute' : 'fixed',
+        top: !position ? 0 : undefined,
+        left: !position ? 0 : undefined,
         zIndex: 100000, // should match the z-index in ModalTrigger
         ...position?.position,
         maxHeight: position?.maxHeight ?? '100vh'

packages/react-aria-components/src/Menu.tsx

@@ -241,6 +241,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
         ref={ref as RefObject<HTMLDivElement>}
         slot={props.slot || undefined}
         data-empty={state.collection.size === 0 || undefined}
+        data-react-aria-incomplete={!(state.collection as BaseCollection<T>).isComplete || undefined}
         onScroll={props.onScroll}>
         <Provider
           values={[