@ionic/core 7.3.2 → 7.3.3-dev.11693533652.1969cc78

package/dist/collection/components/input/test/label-placement/input.e2e.js

@@ -10,7 +10,7 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="example@ionic.io" label-placement="start"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-start`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-start`));
     });
   });
   test.describe(title('input: label placement end'), () => {
@@ -19,7 +19,7 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="example@ionic.io" label-placement="end"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-end`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-end`));
     });
   });
   test.describe(title('input: label placement fixed'), () => {
@@ -28,7 +28,7 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email Email Email Email Email Email" value="example@ionic.io" label-placement="fixed"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-fixed`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-fixed`));
     });
   });
   test.describe(title('input: label placement stacked'), () => {
@@ -37,21 +37,21 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="example@ionic.io" label-placement="stacked"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-stacked-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-stacked-value`));
     });
     test('label should appear above the input when there is a no value', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email" label-placement="stacked"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-stacked-no-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-stacked-no-value`));
     });
     test('long label should truncate', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="stacked"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-stacked-long-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-stacked-long-label`));
     });
   });
   test.describe(title('input: label placement floating'), () => {
@@ -60,14 +60,14 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="example@ionic.io" label-placement="floating"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-value`));
     });
     test('label should appear on top of the input and hide the input when there is a no value', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email" label-placement="floating" placeholder="example@ionic.io"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-no-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-no-value`));
     });
     test('label should appear on top of the input when the input is focused', async ({ page }) => {
       await page.setContent(`
@@ -77,14 +77,14 @@ configs().forEach(({ title, screenshot, config }) => {
       const nativeInput = input.locator('input');
       await nativeInput.click();
       await page.waitForChanges();
-      expect(await input.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-focused-placement-floating-no-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-focused-placement-floating-no-value`));
     });
     test('long label should truncate', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="floating"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-long-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-long-label`));
     });
   });
 });
@@ -98,14 +98,14 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         <ion-input fill="outline" label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="floating"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-long-label-outline`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-long-label-outline`));
     });
     test('long label should truncate with solid', async ({ page }) => {
       await page.setContent(`
         <ion-input fill="solid" label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="floating"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-long-label-solid`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-long-label-solid`));
     });
   });
 });
@@ -116,7 +116,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             <ion-input label="Label Label Label Label Label" placeholder="Text Input"></ion-input>
           `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-truncate`));
+      await expect(input).toHaveScreenshot(screenshot(`input-label-truncate`));
     });
     test('label slot should be truncated with an ellipsis', async ({ page }) => {
       await page.setContent(`
@@ -125,7 +125,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             </ion-input>
           `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-slot-truncate`));
+      await expect(input).toHaveScreenshot(screenshot(`input-label-slot-truncate`));
     });
   });
   test.describe(title('input: async label'), () => {
@@ -141,7 +141,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         el.appendChild(labelEl);
       });
       await page.waitForChanges();
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-async-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-async-label`));
     });
   });
   test.describe(title('input: floating/stacked label layering'), () => {
@@ -159,7 +159,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-input class="custom-input" label="My Label" label-placement="stacked"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-layering`));
+      await expect(input).toHaveScreenshot(screenshot(`input-label-layering`));
     });
   });
 });

package/dist/collection/components/input/test/legacy/basic/input.e2e.js

@@ -18,7 +18,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `, config);
         const item = page.locator('ion-item');
         // Validates the display of an input where text extends off the edge of the component.
-        expect(await item.screenshot()).toMatchSnapshot(screenshot(`input-with-text-overflow`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-text-overflow`));
       });
     });
     test.describe('input with placeholder', () => {
@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `, config);
         const item = page.locator('ion-item');
         // Validates the display of an input with a placeholder.
-        expect(await item.screenshot()).toMatchSnapshot(screenshot(`input-with-placeholder`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-placeholder`));
       });
     });
     test.describe('input disabled', () => {
@@ -50,7 +50,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `, config);
         const item = page.locator('ion-item');
         // Validates the display of an input in a disabled state.
-        expect(await item.screenshot()).toMatchSnapshot(screenshot(`input-disabled`));
+        await expect(item).toHaveScreenshot(screenshot(`input-disabled`));
       });
     });
     test.describe('input with lines="full"', () => {
@@ -67,12 +67,12 @@ configs().forEach(({ title, screenshot, config }) => {
         const item = page.locator('ion-item');
         const input = page.locator('ion-input');
         // Validates the display of an input with an ion-item using lines="full".
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-full`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-full`));
         await input.click();
         // Verifies that the parent item receives .item-has-focus when the input is focused.
         await expect(item).toHaveClass(/item-has-focus/);
         // Validates the display of an input with an ion-item using lines="full" when focused.
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-full-focused`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-full-focused`));
       });
     });
     test.describe('input with lines="inset"', () => {
@@ -89,12 +89,12 @@ configs().forEach(({ title, screenshot, config }) => {
         const item = page.locator('ion-item');
         const input = page.locator('ion-input');
         // Validates the display of an input with an ion-item using lines="inset".
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-inset`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-inset`));
         await input.click();
         // Verifies that the parent item receives .item-has-focus when the input is focused.
         await expect(item).toHaveClass(/item-has-focus/);
         // Validates the display of an input with an ion-item using lines="inset" when focused.
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-inset-focused`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-inset-focused`));
       });
     });
     test.describe('input with lines="none"', () => {
@@ -111,12 +111,12 @@ configs().forEach(({ title, screenshot, config }) => {
         const item = page.locator('ion-item');
         const input = page.locator('ion-input');
         // Validates the display of an input with an ion-item using lines="none".
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-none`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-none`));
         await input.click();
         // Verifies that the parent item receives .item-has-focus when the input is focused.
         await expect(item).toHaveClass(/item-has-focus/);
         // Validates the display of an input with an ion-item using lines="none" when focused.
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-none-focused`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-none-focused`));
       });
     });
     test.describe('input with clear button', () => {
@@ -137,7 +137,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `, config);
         const item = page.locator('ion-item');
         // Validates the display of an input with a clear button.
-        expect(await item.screenshot()).toMatchSnapshot(screenshot(`input-with-clear-button`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-clear-button`));
       });
     });
   });

package/dist/collection/components/input/test/states/input.e2e.js

@@ -10,14 +10,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="hi@ionic.io" readonly="true"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-readonly`));
+      await expect(input).toHaveScreenshot(screenshot(`input-readonly`));
     });
     test('should render disabled input correctly', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email" value="hi@ionic.io" disabled="true"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-disabled`));
+      await expect(input).toHaveScreenshot(screenshot(`input-disabled`));
     });
   });
 });

package/dist/collection/components/label/label.ios.css

@@ -17,8 +17,7 @@
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-wrap),
-:host([text-wrap]) {
+:host(.ion-text-wrap) {
   white-space: normal;
 }
 
@@ -67,8 +66,7 @@
   overflow: inherit;
 }
 
-:host(.ion-text-wrap),
-:host([text-wrap]) {
+:host(.ion-text-wrap) {
   font-size: 14px;
   line-height: 1.5;
 }

package/dist/collection/components/label/label.md.css

@@ -17,8 +17,7 @@
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-wrap),
-:host([text-wrap]) {
+:host(.ion-text-wrap) {
   white-space: normal;
 }
 
@@ -67,8 +66,7 @@
   overflow: inherit;
 }
 
-:host(.ion-text-wrap),
-:host([text-wrap]) {
+:host(.ion-text-wrap) {
   line-height: 1.5;
 }
 

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

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
@@ -20,6 +21,7 @@ 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;
@@ -85,24 +87,13 @@ export class Loading {
    * Present the loading overlay after it has been created.
    */
   async present() {
-    /**
-     * 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;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
-    await this.currentTransition;
+    await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
     }
-    this.currentTransition = undefined;
+    unlock();
   }
   /**
    * Dismiss the loading overlay after it has been presented.
@@ -114,14 +105,15 @@ 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);
     }
-    this.currentTransition = dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

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

@@ -5,6 +5,7 @@ import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, printIonContentErrorMsg } from "../../utils/content/index";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { raf, inheritAttributes, hasLazyBuild } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
 import { GESTURE, BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, } from "../../utils/overlays";
@@ -32,6 +33,7 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
  */
 export class Modal {
   constructor() {
+    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.coreDelegate = CoreDelegate();
     this.isSheetModal = false;
@@ -196,29 +198,25 @@ export class Modal {
    * Present the modal overlay after it has been created.
    */
   async present() {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
     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);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
     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
@@ -242,7 +240,7 @@ export class Modal {
       await waitForMount();
     }
     writeTask(() => this.el.classList.add('show-modal'));
-    this.currentTransition = present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+    await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
       presentingEl: presentingElement,
       currentBreakpoint: this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
@@ -289,14 +287,13 @@ export class Modal {
       this.statusBarStyle = await StatusBar.getStyle();
       setCardStatusBarDark();
     }
-    await this.currentTransition;
     if (this.isSheetModal) {
       this.initSheetGesture();
     }
     else if (hasCardModal) {
       this.initSwipeToClose();
     }
-    this.currentTransition = undefined;
+    unlock();
   }
   initSwipeToClose() {
     var _a;
@@ -386,12 +383,19 @@ export class Modal {
     if (this.gestureAnimationDismissing && role !== GESTURE) {
       return false;
     }
+    /**
+     * Because the canDismiss check below is async,
+     * we need to claim a lock before the check happens,
+     * in case the dismiss transition does run.
+     */
+    const unlock = await this.lockController.lock();
     /**
      * If a canDismiss handler is responsible
      * for calling the dismiss method, we should
      * not run the canDismiss check again.
      */
     if (role !== 'handler' && !(await this.checkCanDismiss(data, role))) {
+      unlock();
       return false;
     }
     const { presentingElement } = this;
@@ -409,24 +413,12 @@ 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) || [];
-    this.currentTransition = dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
+    const dismissed = await 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);
@@ -440,8 +432,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,6 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { raf } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 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";
@@ -15,6 +16,7 @@ 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);
@@ -81,24 +83,13 @@ export class Picker {
    * Present the picker overlay after it has been created.
    */
   async present() {
-    /**
-     * 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;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
-    await this.currentTransition;
-    this.currentTransition = undefined;
+    await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
     }
+    unlock();
   }
   /**
    * Dismiss the picker overlay after it has been presented.
@@ -110,14 +101,15 @@ 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);
     }
-    this.currentTransition = dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

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

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
@@ -29,6 +30,7 @@ export class Popover {
   constructor() {
     this.parentPopover = null;
     this.coreDelegate = CoreDelegate();
+    this.lockController = createLockController();
     this.inline = false;
     this.focusDescendantOnPresent = false;
     this.onBackdropTap = () => {
@@ -202,28 +204,24 @@ export class Popover {
    * was dispatched.
    */
   async present(event) {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
-    /**
-     * 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);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
+    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
@@ -246,7 +244,7 @@ export class Popover {
     else if (!this.keepContentsMounted) {
       await waitForMount();
     }
-    this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+    await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
       event: event || this.event,
       size: this.size,
       trigger: this.triggerEl,
@@ -254,8 +252,6 @@ 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,
@@ -265,6 +261,7 @@ export class Popover {
     if (this.focusDescendantOnPresent) {
       focusFirstDescendant(this.el, this.el);
     }
+    unlock();
   }
   /**
    * Dismiss the popover overlay after it has been presented.
@@ -275,23 +272,12 @@ export class Popover {
    * a parent popover if this popover is nested. Defaults to `true`.
    */
   async dismiss(data, role, dismissParentPopover = true) {
-    /**
-     * 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 unlock = await this.lockController.lock();
     const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
     if (dismissParentPopover && this.parentPopover) {
       this.parentPopover.dismiss(data, role, dismissParentPopover);
     }
-    this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
-    const shouldDismiss = await this.currentTransition;
+    const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
     if (shouldDismiss) {
       if (destroyKeyboardInteraction) {
         destroyKeyboardInteraction();
@@ -309,7 +295,7 @@ export class Popover {
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
     }
-    this.currentTransition = undefined;
+    unlock();
     return shouldDismiss;
   }
   /**