feat: block scrolling as part of the overlay implementation

This commit removes the blocking behavior as part of the backdrop. Developers with custom implementations using ion-backdrop that want scroll blocking will either need to use Ionic's gesture controller API or manually add the backdrop-no-scroll class to the body when their overlay is presented and remove it when dismissed.

Author: sean-perkins

core/src/components.d.ts

@@ -345,7 +345,6 @@ export namespace Components {
         "type": 'submit' | 'reset' | 'button';
     }
     interface IonBackdrop {
-        "block": () => Promise<void>;
         /**
           * If `true`, the backdrop will stop propagation on tap.
          */
@@ -354,7 +353,6 @@ export namespace Components {
           * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
          */
         "tappable": boolean;
-        "unblock": () => Promise<void>;
         /**
           * If `true`, the backdrop will be visible.
          */

core/src/components/backdrop/backdrop.tsx

@@ -1,6 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Listen, Method, Prop, h } from '@stencil/core';
-import { GESTURE_CONTROLLER } from '@utils/gesture';
+import { Component, Element, Event, Host, Listen, Prop, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 
@@ -13,10 +12,6 @@ import { getIonMode } from '../../global/ionic-global';
   shadow: true,
 })
 export class Backdrop implements ComponentInterface {
-  private blocker = GESTURE_CONTROLLER.createBlocker({
-    disableScroll: true,
-  });
-
   /**
    * If `true`, the backdrop will be visible.
    */
@@ -39,22 +34,6 @@ export class Backdrop implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 
-  /** @internal */
-  @Method()
-  async block() {
-    if (this.stopPropagation) {
-      this.blocker.block();
-    }
-  }
-
-  /** @internal */
-  @Method()
-  async unblock() {
-    if (this.stopPropagation) {
-      this.blocker.unblock();
-    }
-  }
-
   @Listen('click', { passive: false, capture: true })
   protected onMouseDown(ev: TouchEvent) {
     this.emitTap(ev);

core/src/utils/gesture/gesture-controller.ts

@@ -185,7 +185,7 @@ class GestureDelegate {
   }
 }
 
-class BlockerDelegate {
+export class BlockerDelegate {
   private ctrl?: GestureController;
 
   constructor(

core/src/utils/overlays-interface.ts

@@ -2,19 +2,30 @@ import type { EventEmitter } from '@stencil/core';
 
 import type { AnimationBuilder, HTMLStencilElement } from '../interface';
 
+import type { BlockerDelegate } from './gesture/gesture-controller';
+
 export interface OverlayEventDetail<T = any> {
   data?: T;
   role?: string;
 }
 
 export interface OverlayInterface {
   el: HTMLIonOverlayElement;
-  backdropEl?: HTMLIonBackdropElement;
   animated: boolean;
   keyboardClose: boolean;
   overlayIndex: number;
   presented: boolean;
 
+  /**
+   * Reference to the ion-backdrop element in the overlay shadow DOM.
+   */
+  backdropEl?: HTMLIonBackdropElement;
+  /**
+   * Instance of the gesture controller, used to enable and disable scrolling
+   * on the main content when the overlay is presented and dismissed.
+   */
+  blocker?: BlockerDelegate;
+
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 

core/src/utils/overlays.ts

@@ -20,6 +20,7 @@ import type {
 } from '../interface';
 
 import { CoreDelegate } from './framework-delegate';
+import { GESTURE_CONTROLLER } 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';
@@ -472,7 +473,12 @@ export const present = async <OverlayPresentOptions>(
   setRootAriaHidden(true);
 
   if (overlay.backdropEl) {
-    overlay.backdropEl.block();
+    // Scrolling should only be disabled if the overlay has a backdrop
+    overlay.blocker = GESTURE_CONTROLLER.createBlocker({
+      disableScroll: true,
+    });
+
+    overlay.blocker.block();
   }
 
   overlay.presented = true;
@@ -553,14 +559,11 @@ export const dismiss = async <OverlayDismissOptions>(
     return false;
   }
 
-  let isLastVisibleOverlay = false;
-
   /**
    * 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) {
-    isLastVisibleOverlay = true;
     setRootAriaHidden(false);
   }
 
@@ -582,9 +585,8 @@ export const dismiss = async <OverlayDismissOptions>(
       await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     }
 
-    if (overlay.backdropEl && isLastVisibleOverlay) {
-      // If the dismissed overlay is the last visible one, re-enable scrolling
-      overlay.backdropEl.unblock();
+    if (overlay.blocker) {
+      overlay.blocker.destroy();
     }
 
     overlay.didDismiss.emit({ data, role });

core/src/utils/test/overlays/overlays.spec.ts

@@ -184,4 +184,34 @@ describe('overlays: scroll blocking', () => {
 
     expect(body.classList.contains('backdrop-no-scroll')).toEqual(false);
   });
+
+  it('should not enable scroll until last overlay is dismissed', async () => {
+    const page = await newSpecPage({
+      components: [Modal, Backdrop],
+      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.classList.contains('backdrop-no-scroll')).toEqual(true);
+
+    await modalTwo.present();
+
+    expect(body.classList.contains('backdrop-no-scroll')).toEqual(true);
+
+    await modalOne.dismiss();
+
+    expect(body.classList.contains('backdrop-no-scroll')).toEqual(true);
+
+    await modalTwo.dismiss();
+
+    expect(body.classList.contains('backdrop-no-scroll')).toEqual(false);
+  });
 });