fix(popover): popover positions correctly on all frameworks (#26306)

Resolves #25337

core/src/components/popover/popover.tsx

@@ -27,12 +27,7 @@ import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
-import {
-  configureDismissInteraction,
-  configureKeyboardInteraction,
-  configureTriggerInteraction,
-  waitOneFrame,
-} from './utils';
+import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from './utils';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -464,18 +459,21 @@ export class Popover implements ComponentInterface, PopoverInterface {
     }
     this.configureDismissInteraction();
 
-    // TODO: FW-2773: Apply this to only the lazy build.
-    /**
-     * ionMount only needs to be emitted if the popover is inline.
-     */
     this.ionMount.emit();
-    /**
-     * Wait one raf before presenting the popover.
-     * This allows the lazy build enough time to
-     * calculate the popover dimensions for the animation.
-     */
-    await waitOneFrame();
 
+    return new Promise((resolve) => {
+      /**
+       * Wait two request animation frame loops before presenting the popover.
+       * This allows the framework implementations enough time to mount
+       * the popover contents, so the bounding box is set when the popover
+       * transition starts.
+       *
+       * On Angular and React, a single raf is enough time, but for Vue
+       * we need to wait two rafs. As a result we are using two rafs for
+       * all frameworks to ensure the popover is presented correctly.
+       */
+      raf(() => {
+        raf(async () => {
           this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
             event: event || this.event,
             size: this.size,
@@ -498,6 +496,11 @@ export class Popover implements ComponentInterface, PopoverInterface {
           if (this.focusDescendantOnPresent) {
             focusFirstDescendant(this.el, this.el);
           }
+
+          resolve();
+        });
+      });
+    });
   }
 
   /**

core/src/components/popover/utils.ts

@@ -928,7 +928,3 @@ export const shouldShowArrow = (side: PositionSide, didAdjustBounds = false, ev?
 
   return true;
 };
-
-export const waitOneFrame = () => {
-  return new Promise<void>((resolve) => raf(() => resolve()));
-};

packages/react/src/components/createInlineOverlayComponent.tsx

@@ -55,6 +55,17 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
     componentDidMount() {
       this.componentDidUpdate(this.props);
 
+      /**
+       * Mount the inner component when the
+       * overlay is about to open.
+       *
+       * For ion-popover, this is when `ionMount` is emitted.
+       * For other overlays, this is when `willPresent` is emitted.
+       */
+      this.ref.current?.addEventListener('ionMount', () => {
+        this.setState({ isOpen: true });
+      });
+
       /**
        * Mount the inner component
        * when overlay is about to open.

packages/vue/src/vue-component-lib/overlays.ts

@@ -139,6 +139,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
       const elementRef = ref();
 
       onMounted(() => {
+        elementRef.value.addEventListener('ion-mount', () => isOpen.value = true);
         elementRef.value.addEventListener('will-present', () => isOpen.value = true);
         elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false);
       });