@ionic/core 7.5.7-dev.11701203423.1b6a8829 → 7.5.7-dev.11701270755.14f050ad

package/dist/collection/utils/gesture/gesture-controller.js

@@ -189,5 +189,5 @@ class BlockerDelegate {
     this.ctrl = undefined;
   }
 }
-const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
+export const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 export const GESTURE_CONTROLLER = new GestureController();

package/dist/collection/utils/overlays.js

@@ -5,6 +5,7 @@ import { doc } from "./browser/index";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
+import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
 import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from "./helpers";
 import { printIonWarning } from "./logging";
@@ -28,7 +29,10 @@ export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 export const loadingController = /*@__PURE__*/ createController('ion-loading');
 export const modalController = /*@__PURE__*/ createController('ion-modal');
-export const pickerController = /*@__PURE__*/ createController('ion-picker');
+/**
+ * @deprecated Use the inline ion-picker component instead.
+ */
+export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -138,7 +142,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-  const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
+  const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
   const target = ev.target;
   /**
    * If no active overlay, ignore this event.
@@ -323,7 +327,7 @@ export const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 export const getOverlays = (doc, selector) => {
   if (selector === undefined) {
-    selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
+    selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
   }
   return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -389,6 +393,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     return;
   }
   setRootAriaHidden(true);
+  document.body.classList.add(BACKDROP_NO_SCROLL);
   overlay.presented = true;
   overlay.willPresent.emit();
   (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -451,12 +456,14 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
   if (!overlay.presented) {
     return false;
   }
+  const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
   /**
    * If this is the last visible overlay then
    * we want to re-add the root to the accessibility tree.
    */
-  if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
+  if (lastOverlay) {
     setRootAriaHidden(false);
+    document.body.classList.remove(BACKDROP_NO_SCROLL);
   }
   overlay.presented = false;
   try {

package/dist/collection/utils/test/overlays/overlays-scroll-blocking.spec.js

@@ -0,0 +1,65 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Modal } from "../../../components/modal/modal";
+describe('overlays: scroll blocking', () => {
+  it('should not block scroll when the overlay is created', async () => {
+    const page = await newSpecPage({
+      components: [Modal],
+      html: `
+        <ion-modal></ion-modal>
+      `,
+    });
+    const body = page.doc.querySelector('body');
+    expect(body).not.toHaveClass('backdrop-no-scroll');
+  });
+  it('should block scroll when the overlay is presented', async () => {
+    const page = await newSpecPage({
+      components: [Modal],
+      html: `
+        <ion-modal></ion-modal>
+      `,
+    });
+    const modal = page.body.querySelector('ion-modal');
+    const body = page.doc.querySelector('body');
+    await modal.present();
+    expect(body).toHaveClass('backdrop-no-scroll');
+    await modal.dismiss();
+    expect(body).not.toHaveClass('backdrop-no-scroll');
+  });
+  it('should not block scroll when the overlay is dismissed', async () => {
+    const page = await newSpecPage({
+      components: [Modal],
+      html: `
+        <ion-modal></ion-modal>
+      `,
+    });
+    const modal = page.body.querySelector('ion-modal');
+    const body = page.doc.querySelector('body');
+    await modal.present();
+    expect(body).toHaveClass('backdrop-no-scroll');
+    await modal.dismiss();
+    expect(body).not.toHaveClass('backdrop-no-scroll');
+  });
+  it('should not enable scroll until last overlay is dismissed', async () => {
+    const page = await newSpecPage({
+      components: [Modal],
+      html: `
+        <ion-modal id="one"></ion-modal>
+        <ion-modal id="two"></ion-modal>
+      `,
+    });
+    const modalOne = page.body.querySelector('#one');
+    const modalTwo = page.body.querySelector('#two');
+    const body = page.doc.querySelector('body');
+    await modalOne.present();
+    expect(body).toHaveClass('backdrop-no-scroll');
+    await modalTwo.present();
+    expect(body).toHaveClass('backdrop-no-scroll');
+    await modalOne.dismiss();
+    expect(body).toHaveClass('backdrop-no-scroll');
+    await modalTwo.dismiss();
+    expect(body).not.toHaveClass('backdrop-no-scroll');
+  });
+});