@ionic/core 7.3.2-dev.11693262117.17edbf6d → 7.3.2-dev.11693321491.12123d27

package/dist/cjs/ion-toast.cjs.entry.js

@@ -9,11 +9,11 @@ const index = require('./index-484b1104.js');
 const config = require('./config-d5882735.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-cc7dfb7c.js');
-const overlays = require('./overlays-2b9fa92e.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const animation = require('./animation-2bb33618.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-91be3b84.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-306a7476.js');
 
@@ -126,7 +126,6 @@ const Toast = class {
     this.willDismissShorthand = index.createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = index.createEvent(this, "didDismiss", 7);
     this.delegateController = overlays.createDelegateController(this);
-    this.lockController = overlays.createLockController();
     this.triggerController = overlays.createTriggerController();
     this.customHTMLEnabled = ionicGlobal.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -196,19 +195,30 @@ const Toast = class {
    * Present the toast overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * When using an inline toast
+     * and dismissing a toast it is possible to
+     * quickly present the toast while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
     await this.delegateController.attachViewToDom();
-    await overlays.present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
+    this.currentTransition = overlays.present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
+    await this.currentTransition;
     /**
      * Content is revealed to screen readers after
      * the transition to avoid jank since this
      * state updates will cause a re-render.
      */
     this.revealContentToScreenReader = true;
+    this.currentTransition = undefined;
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
     }
-    unlock();
   }
   /**
    * Dismiss the toast overlay after it has been presented.
@@ -220,16 +230,15 @@ const Toast = class {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    const dismissed = await overlays.dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
+    this.currentTransition = overlays.dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
       this.revealContentToScreenReader = false;
     }
-    unlock();
     return dismissed;
   }
   /**

package/dist/cjs/{overlays-2b9fa92e.js → overlays-cf7fa4cf.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-91be3b84.js');
 const hardwareBackButton = require('./hardware-back-button-b67c8e75.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index = require('./index-cc7dfb7c.js');
@@ -619,27 +619,6 @@ const createDelegateController = (ref) => {
     removeViewFromDom,
   };
 };
-/**
- * Creates a lock controller.
- *
- * This function locks transitions.
- * The unlock() function within it calls resolve on this function, unlocking the transitions.
- */
-const createLockController = () => {
-  let waitPromise;
-  const lock = async () => {
-    const p = waitPromise;
-    let resolve;
-    waitPromise = new Promise((r) => (resolve = r));
-    if (p !== undefined) {
-      await p;
-    }
-    return resolve;
-  };
-  return {
-    lock,
-  };
-};
 /**
  * Constructs a trigger interaction for an overlay.
  * Presents an overlay when the trigger is clicked.
@@ -697,7 +676,6 @@ exports.actionSheetController = actionSheetController;
 exports.activeAnimations = activeAnimations;
 exports.alertController = alertController;
 exports.createDelegateController = createDelegateController;
-exports.createLockController = createLockController;
 exports.createTriggerController = createTriggerController;
 exports.dismiss = dismiss;
 exports.eventMethod = eventMethod;

package/dist/collection/components/action-sheet/action-sheet.js

@@ -4,7 +4,7 @@
 import { Host, h, readTask } from "@stencil/core";
 import { createButtonActiveGesture } from "../../utils/gesture/button-active";
 import { raf } from "../../utils/helpers";
-import { BACKDROP, createDelegateController, createLockController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
@@ -17,7 +17,6 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 export class ActionSheet {
   constructor() {
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.presented = false;
     this.onBackdropTap = () => {
@@ -65,10 +64,21 @@ export class ActionSheet {
    * Present the action sheet overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * When using an inline action sheet
+     * and dismissing a action sheet it is possible to
+     * quickly present the action sheet while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
     await this.delegateController.attachViewToDom();
-    await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
-    unlock();
+    this.currentTransition = present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
+    await this.currentTransition;
+    this.currentTransition = undefined;
   }
   /**
    * Dismiss the action sheet overlay after it has been presented.
@@ -80,12 +90,11 @@ export class ActionSheet {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
-    const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
+    this.currentTransition = dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
-    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/alert/alert.js

@@ -5,7 +5,7 @@ import { Host, forceUpdate, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { createButtonActiveGesture } from "../../utils/gesture/button-active";
 import { raf } from "../../utils/helpers";
-import { createDelegateController, createLockController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -21,7 +21,6 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 export class Alert {
   constructor() {
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.processedInputs = [];
@@ -188,10 +187,21 @@ export class Alert {
    * Present the alert overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * When using an inline alert
+     * and dismissing an alert it is possible to
+     * quickly present the alert while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
     await this.delegateController.attachViewToDom();
-    await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
-    unlock();
+    this.currentTransition = present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
+    await this.currentTransition;
+    this.currentTransition = undefined;
   }
   /**
    * Dismiss the alert overlay after it has been presented.
@@ -203,12 +213,11 @@ export class Alert {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
-    const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
+    this.currentTransition = dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
-    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/loading/loading.js

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
-import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createLockController, createTriggerController, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -20,7 +20,6 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 export class Loading {
   constructor() {
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -86,13 +85,24 @@ export class Loading {
    * Present the loading overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * When using an inline loading indicator
+     * and dismissing a loading indicator it is possible to
+     * quickly present the loading indicator while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
     await this.delegateController.attachViewToDom();
-    await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
+    this.currentTransition = present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
+    await this.currentTransition;
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
     }
-    unlock();
+    this.currentTransition = undefined;
   }
   /**
    * Dismiss the loading overlay after it has been presented.
@@ -104,15 +114,14 @@ export class Loading {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
+    this.currentTransition = dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
-    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/modal/modal.js

@@ -7,7 +7,7 @@ import { CoreDelegate, attachComponent, detachComponent } from "../../utils/fram
 import { raf, inheritAttributes, hasLazyBuild } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
-import { GESTURE, BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present, createLockController, createTriggerController, setOverlayId, } from "../../utils/overlays";
+import { GESTURE, BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { config } from "../../global/config";
@@ -32,7 +32,6 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
  */
 export class Modal {
   constructor() {
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.coreDelegate = CoreDelegate();
     this.isSheetModal = false;
@@ -200,16 +199,26 @@ export class Modal {
     if (this.presented) {
       return;
     }
-    const unlock = await this.lockController.lock();
     const { presentingElement, el } = this;
+    /**
+     * When using an inline modal
+     * and dismissing a modal it is possible to
+     * quickly present the modal while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
     /**
      * If the modal is presented multiple times (inline modals), we
      * need to reset the current breakpoint to the initial breakpoint.
      */
     this.currentBreakpoint = this.initialBreakpoint;
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
     this.ionMount.emit();
+    this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -233,6 +242,11 @@ export class Modal {
       await waitForMount();
     }
     writeTask(() => this.el.classList.add('show-modal'));
+    this.currentTransition = present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+      presentingEl: presentingElement,
+      currentBreakpoint: this.initialBreakpoint,
+      backdropBreakpoint: this.backdropBreakpoint,
+    });
     /* tslint:disable-next-line */
     if (typeof window !== 'undefined') {
       /**
@@ -275,18 +289,14 @@ export class Modal {
       this.statusBarStyle = await StatusBar.getStyle();
       setCardStatusBarDark();
     }
-    await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
-      presentingEl: presentingElement,
-      currentBreakpoint: this.initialBreakpoint,
-      backdropBreakpoint: this.backdropBreakpoint,
-    });
+    await this.currentTransition;
     if (this.isSheetModal) {
       this.initSheetGesture();
     }
     else if (hasCardModal) {
       this.initSwipeToClose();
     }
-    unlock();
+    this.currentTransition = undefined;
   }
   initSwipeToClose() {
     var _a;
@@ -376,7 +386,6 @@ export class Modal {
     if (this.gestureAnimationDismissing && role !== GESTURE) {
       return false;
     }
-    const unlock = await this.lockController.lock();
     /**
      * If a canDismiss handler is responsible
      * for calling the dismiss method, we should
@@ -400,12 +409,24 @@ export class Modal {
       window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
       this.keyboardOpenCallback = undefined;
     }
+    /**
+     * When using an inline modal
+     * and presenting a modal it is possible to
+     * quickly dismiss the modal while it is
+     * presenting. We need to await any current
+     * transition to allow the present to finish
+     * before dismissing again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
     const enteringAnimation = activeAnimations.get(this) || [];
-    const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
+    this.currentTransition = dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
       presentingEl: presentingElement,
       currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
     });
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
@@ -419,8 +440,8 @@ export class Modal {
       enteringAnimation.forEach((ani) => ani.destroy());
     }
     this.currentBreakpoint = undefined;
+    this.currentTransition = undefined;
     this.animation = undefined;
-    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/picker/picker.js

@@ -3,7 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { raf } from "../../utils/helpers";
-import { createDelegateController, createLockController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
@@ -15,7 +15,6 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
 export class Picker {
   constructor() {
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.onBackdropTap = () => {
       this.dismiss(undefined, BACKDROP);
@@ -82,13 +81,24 @@ export class Picker {
    * Present the picker overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * When using an inline picker
+     * and dismissing an picker it is possible to
+     * quickly present the picker while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
     await this.delegateController.attachViewToDom();
-    await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
+    this.currentTransition = present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
+    await this.currentTransition;
+    this.currentTransition = undefined;
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
     }
-    unlock();
   }
   /**
    * Dismiss the picker overlay after it has been presented.
@@ -100,15 +110,14 @@ export class Picker {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
+    this.currentTransition = dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
-    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/popover/popover.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
-import { BACKDROP, createLockController, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
@@ -29,7 +29,6 @@ export class Popover {
   constructor() {
     this.parentPopover = null;
     this.coreDelegate = CoreDelegate();
-    this.lockController = createLockController();
     this.inline = false;
     this.focusDescendantOnPresent = false;
     this.onBackdropTap = () => {
@@ -206,15 +205,25 @@ export class Popover {
     if (this.presented) {
       return;
     }
-    const unlock = await this.lockController.lock();
+    /**
+     * When using an inline popover
+     * and dismissing a popover it is possible to
+     * quickly present the popover while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
+    this.ionMount.emit();
     this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();
     }
     this.configureDismissInteraction();
-    this.ionMount.emit();
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -237,7 +246,7 @@ export class Popover {
     else if (!this.keepContentsMounted) {
       await waitForMount();
     }
-    await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+    this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
       event: event || this.event,
       size: this.size,
       trigger: this.triggerEl,
@@ -245,6 +254,8 @@ export class Popover {
       side: this.side,
       align: this.alignment,
     });
+    await this.currentTransition;
+    this.currentTransition = undefined;
     /**
      * If popover is nested and was
      * presented using the "Right" arrow key,
@@ -254,7 +265,6 @@ export class Popover {
     if (this.focusDescendantOnPresent) {
       focusFirstDescendant(this.el, this.el);
     }
-    unlock();
   }
   /**
    * Dismiss the popover overlay after it has been presented.
@@ -265,12 +275,23 @@ export class Popover {
    * a parent popover if this popover is nested. Defaults to `true`.
    */
   async dismiss(data, role, dismissParentPopover = true) {
-    const unlock = await this.lockController.lock();
+    /**
+     * When using an inline popover
+     * and presenting a popover it is possible to
+     * quickly dismiss the popover while it is
+     * presenting. We need to await any current
+     * transition to allow the present to finish
+     * before dismissing again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
     const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
     if (dismissParentPopover && this.parentPopover) {
       this.parentPopover.dismiss(data, role, dismissParentPopover);
     }
-    const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
+    this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
+    const shouldDismiss = await this.currentTransition;
     if (shouldDismiss) {
       if (destroyKeyboardInteraction) {
         destroyKeyboardInteraction();
@@ -288,7 +309,7 @@ export class Popover {
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
     }
-    unlock();
+    this.currentTransition = undefined;
     return shouldDismiss;
   }
   /**

package/dist/collection/components/popover/test/async/popover.e2e.js

@@ -0,0 +1,20 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('popover: alignment with async component'), async () => {
+    test('should align popover centered with button when component is added async', async ({ page }) => {
+      await page.goto('/src/components/popover/test/async', config);
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const button = page.locator('#button');
+      await button.click();
+      await ionPopoverDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`popover-async`));
+    });
+  });
+});