@ionic/core 7.3.2-dev.11693262117.17edbf6d → 7.3.2-dev.11693321763.15a54694

package/components/action-sheet.js

@@ -4,7 +4,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client';
 import { c as createButtonActiveGesture } from './button-active.js';
 import { r as raf } from './helpers.js';
-import { d as createDelegateController, e as createLockController, f as createTriggerController, B as BACKDROP, i as isCancel, g as present, h as dismiss, j as eventMethod, s as safeCall, k as prepareOverlay, n as setOverlayId } from './overlays.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays.js';
 import { g as getClassMap } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 import { c as createAnimation } from './animation.js';
@@ -113,7 +113,6 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.presented = false;
     this.onBackdropTap = () => {
@@ -161,10 +160,21 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
    * 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.
@@ -176,12 +186,11 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
    * 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/components/alert.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } fr
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
 import { c as createButtonActiveGesture } from './button-active.js';
 import { r as raf } from './helpers.js';
-import { d as createDelegateController, e as createLockController, f as createTriggerController, B as BACKDROP, i as isCancel, k as prepareOverlay, n as setOverlayId, g as present, h as dismiss, j as eventMethod, s as safeCall } from './overlays.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays.js';
 import { g as getClassMap } from './theme.js';
 import { c as config, b as getIonMode } from './ionic-global.js';
 import { c as createAnimation } from './animation.js';
@@ -114,7 +114,6 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.processedInputs = [];
@@ -281,10 +280,21 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
    * 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.
@@ -296,12 +306,11 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
    * 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/components/framework-delegate.js

@@ -39,6 +39,7 @@ const CoreDelegate = () => {
   const attachViewToDom = async (parentElement, userComponent, userComponentProps = {}, cssClasses = []) => {
     var _a, _b;
     BaseComponent = parentElement;
+    let ChildComponent;
     /**
      * If passing in a component via the `component` props
      * we need to append it inside of our overlay component.
@@ -65,6 +66,7 @@ const CoreDelegate = () => {
        * inside of the overlay component.
        */
       BaseComponent.appendChild(el);
+      ChildComponent = el;
       await new Promise((resolve) => componentOnReady(el, resolve));
     }
     else if (BaseComponent.children.length > 0 &&
@@ -73,7 +75,7 @@ const CoreDelegate = () => {
        * The delegate host wrapper el is only needed for modals and popovers
        * because they allow the dev to provide custom content to the overlay.
        */
-      const root = BaseComponent.children[0];
+      const root = (ChildComponent = BaseComponent.children[0]);
       if (!root.classList.contains('ion-delegate-host')) {
         /**
          * If the root element is not a delegate host, it means
@@ -88,6 +90,12 @@ const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
+        /**
+         * Update the ChildComponent to be the
+         * newly created div in the event that one
+         * does not already exist.
+         */
+        ChildComponent = el;
       }
     }
     /**
@@ -103,7 +111,18 @@ const CoreDelegate = () => {
     Reference = document.createComment('ionic teleport');
     BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
     app.appendChild(BaseComponent);
-    return BaseComponent;
+    /**
+     * We return the child component rather than the overlay
+     * reference itself since modal and popover will
+     * use this to wait for any Ionic components in the child view
+     * to be ready (i.e. componentOnReady) when using the
+     * lazy loaded component bundle.
+     *
+     * However, we fall back to returning BaseComponent
+     * in the event that a modal or popover is presented
+     * with no child content.
+     */
+    return ChildComponent !== null && ChildComponent !== void 0 ? ChildComponent : BaseComponent;
   };
   const removeViewFromDom = () => {
     /**

package/components/ion-loading.js

@@ -4,7 +4,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
 import { r as raf } from './helpers.js';
-import { d as createDelegateController, e as createLockController, f as createTriggerController, B as BACKDROP, k as prepareOverlay, n as setOverlayId, g as present, h as dismiss, j as eventMethod } from './overlays.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays.js';
 import { g as getClassMap } from './theme.js';
 import { c as config, b as getIonMode } from './ionic-global.js';
 import { c as createAnimation } from './animation.js';
@@ -116,7 +116,6 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -182,13 +181,24 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
    * 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.
@@ -200,15 +210,14 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
    * 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/components/ion-menu.js

@@ -7,7 +7,7 @@ import { d as doc } from './index5.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
 import { o as isEndSide, i as inheritAriaAttributes, p as assert, m as clamp } from './helpers.js';
 import { m as menuController } from './index4.js';
-import { q as getOverlay } from './overlays.js';
+import { o as getOverlay } from './overlays.js';
 import { c as config, b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './backdrop.js';
 

package/components/ion-modal.js

@@ -7,7 +7,7 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
 import { g as getElementRoot, m as clamp, r as raf, d as inheritAttributes, l as hasLazyBuild } from './helpers.js';
 import { p as printIonWarning } from './index6.js';
 import { g as getCapacitor } from './capacitor.js';
-import { G as GESTURE, e as createLockController, f as createTriggerController, B as BACKDROP, k as prepareOverlay, n as setOverlayId, g as present, r as activeAnimations, h as dismiss, j as eventMethod } from './overlays.js';
+import { G as GESTURE, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, q as activeAnimations, g as dismiss, h as eventMethod } from './overlays.js';
 import { g as getClassMap } from './theme.js';
 import { e as deepReady, w as waitForMount } from './index3.js';
 import { b as getIonMode, c as config } from './ionic-global.js';
@@ -1113,7 +1113,6 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.ionMount = createEvent(this, "ionMount", 7);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.coreDelegate = CoreDelegate();
     this.isSheetModal = false;
@@ -1281,16 +1280,26 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     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
@@ -1314,6 +1323,11 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
       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') {
       /**
@@ -1356,18 +1370,14 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
       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;
@@ -1457,7 +1467,6 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     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
@@ -1481,12 +1490,24 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
       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);
@@ -1500,8 +1521,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
       enteringAnimation.forEach((ani) => ani.destroy());
     }
     this.currentBreakpoint = undefined;
+    this.currentTransition = undefined;
     this.animation = undefined;
-    unlock();
     return dismissed;
   }
   /**

package/components/ion-picker.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { r as raf } from './helpers.js';
-import { d as createDelegateController, e as createLockController, f as createTriggerController, B as BACKDROP, i as isCancel, k as prepareOverlay, n as setOverlayId, g as present, h as dismiss, j as eventMethod, s as safeCall } from './overlays.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays.js';
 import { g as getClassMap } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 import { c as createAnimation } from './animation.js';
@@ -71,7 +71,6 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.onBackdropTap = () => {
       this.dismiss(undefined, BACKDROP);
@@ -138,13 +137,24 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
    * 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.
@@ -156,15 +166,14 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
    * 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/components/ion-toast.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
 import { g as getElementRoot, r as raf } from './helpers.js';
 import { p as printIonWarning } from './index6.js';
-import { d as createDelegateController, e as createLockController, f as createTriggerController, i as isCancel, k as prepareOverlay, n as setOverlayId, g as present, h as dismiss, j as eventMethod, s as safeCall } from './overlays.js';
+import { d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays.js';
 import { g as getClassMap, c as createColorClasses } from './theme.js';
 import { c as config, b as getIonMode } from './ionic-global.js';
 import { c as createAnimation } from './animation.js';
@@ -123,7 +123,6 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -193,19 +192,30 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
    * 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 present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
+    this.currentTransition = 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.
@@ -217,16 +227,15 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
    * 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, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
+    this.currentTransition = 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/components/overlays.js

@@ -617,27 +617,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.
@@ -689,4 +668,4 @@ const createTriggerController = () => {
   };
 };
 
-export { BACKDROP as B, GESTURE as G, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createLockController as e, createTriggerController as f, present as g, dismiss as h, isCancel as i, eventMethod as j, prepareOverlay as k, loadingController as l, modalController as m, setOverlayId as n, focusFirstDescendant as o, pickerController as p, getOverlay as q, activeAnimations as r, safeCall as s, toastController as t };
+export { BACKDROP as B, GESTURE as G, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getOverlay as o, pickerController as p, activeAnimations as q, safeCall as s, toastController as t };

package/components/popover.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate.js';
 import { r as raf, g as getElementRoot, a as addEventListener, l as hasLazyBuild } from './helpers.js';
 import { p as printIonWarning } from './index6.js';
-import { e as createLockController, B as BACKDROP, k as prepareOverlay, n as setOverlayId, g as present, o as focusFirstDescendant, h as dismiss, j as eventMethod } from './overlays.js';
+import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays.js';
 import { b as getIonMode, a as isPlatform } from './ionic-global.js';
 import { g as getClassMap } from './theme.js';
 import { e as deepReady, w as waitForMount } from './index3.js';
@@ -984,7 +984,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     this.ionMount = createEvent(this, "ionMount", 7);
     this.parentPopover = null;
     this.coreDelegate = CoreDelegate();
-    this.lockController = createLockController();
     this.inline = false;
     this.focusDescendantOnPresent = false;
     this.onBackdropTap = () => {
@@ -1161,15 +1160,25 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     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
@@ -1192,7 +1201,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     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,
@@ -1200,6 +1209,8 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
       side: this.side,
       align: this.alignment,
     });
+    await this.currentTransition;
+    this.currentTransition = undefined;
     /**
      * If popover is nested and was
      * presented using the "Right" arrow key,
@@ -1209,7 +1220,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     if (this.focusDescendantOnPresent) {
       focusFirstDescendant(this.el, this.el);
     }
-    unlock();
   }
   /**
    * Dismiss the popover overlay after it has been presented.
@@ -1220,12 +1230,23 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
    * 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();
@@ -1243,7 +1264,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
     }
-    unlock();
+    this.currentTransition = undefined;
     return shouldDismiss;
   }
   /**