fix(toast): remove backdrop-no-scroll for last toast overlay

In case last overlay is a toast, the backdrop-no-scroll css class is removed from body. closes ionic-team#30112
tobiloeb · Jan 9, 2025 · ab25c71 · ab25c71
1 parent 05928e3
commit ab25c71
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
@@ -646,6 +646,14 @@ export const dismiss = async <OverlayDismissOptions>(
     return false;
   }
 
+  const presentedOverlays = doc !== undefined ? getPresentedOverlays(doc) : [];
+
+  const isLastOverlay = presentedOverlays.length === 1;
+
+  if (isLastOverlay) {
+    document.body.classList.remove(BACKDROP_NO_SCROLL);
+  }
+
   /**
    * For accessibility, toasts lack focus traps and don’t receive
    * `aria-hidden` on the root element when presented.
@@ -657,7 +665,7 @@ export const dismiss = async <OverlayDismissOptions>(
    * Therefore, we must remove `aria-hidden` from the root element
    * when the last non-toast overlay is dismissed.
    */
-  const overlaysNotToast = doc !== undefined ? getPresentedOverlays(doc).filter((o) => o.tagName !== 'ION-TOAST') : [];
+  const overlaysNotToast = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST');
 
   const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
 
@@ -667,7 +675,6 @@ export const dismiss = async <OverlayDismissOptions>(
    */
   if (lastOverlayNotToast) {
     setRootAriaHidden(false);
-    document.body.classList.remove(BACKDROP_NO_SCROLL);
   }
 
   overlay.presented = false;

diff --git a/core/src/utils/test/overlays/overlays-scroll-blocking.spec.ts b/core/src/utils/test/overlays/overlays-scroll-blocking.spec.ts
@@ -1,6 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
 
 import { Modal } from '../../../components/modal/modal';
+import { Toast } from '../../../components/toast/toast';
 
 describe('overlays: scroll blocking', () => {
   it('should not block scroll when the overlay is created', async () => {
@@ -85,4 +86,34 @@ describe('overlays: scroll blocking', () => {
 
     expect(body).not.toHaveClass('backdrop-no-scroll');
   });
+
+  it('should not enable scroll until last toast overlay is dismissed', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `
+        <ion-toast id="one"></ion-toast>
+        <ion-toast id="two"></ion-toast>
+      `,
+    });
+
+    const toastOne = page.body.querySelector('#one') as HTMLIonToastElement;
+    const toastTwo = page.body.querySelector('#two') as HTMLIonToastElement;
+    const body = page.doc.querySelector('body')!;
+
+    await toastOne.present();
+
+    expect(body).toHaveClass('backdrop-no-scroll');
+
+    await toastTwo.present();
+
+    expect(body).toHaveClass('backdrop-no-scroll');
+
+    await toastOne.dismiss();
+
+    expect(body).toHaveClass('backdrop-no-scroll');
+
+    await toastTwo.dismiss();
+
+    expect(body).not.toHaveClass('backdrop-no-scroll');
+  });
 });