fix(sheet): disabling backdrop when focus trap is disabled

Author: ShaneK

core/src/components/modal/gestures/sheet.ts

@@ -95,6 +95,11 @@ export const createSheetGesture = (
   const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
 
   const enableBackdrop = () => {
+    // Respect explicit opt-out of focus trapping/backdrop interactions
+    // If focusTrap is false, do not enable the backdrop or re-enable focus trap
+    if ((baseEl as HTMLIonModalElement & { focusTrap?: boolean }).focusTrap === false) {
+      return;
+    }
     baseEl.style.setProperty('pointer-events', 'auto');
     backdropEl.style.setProperty('pointer-events', 'auto');
 
@@ -235,7 +240,9 @@ export const createSheetGesture = (
      * ion-backdrop and .modal-wrapper always have pointer-events: auto
      * applied, so the modal content can still be interacted with.
      */
-    const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
+    const shouldEnableBackdrop =
+      currentBreakpoint > backdropBreakpoint &&
+      (baseEl as HTMLIonModalElement & { focusTrap?: boolean }).focusTrap !== false;
     if (shouldEnableBackdrop) {
       enableBackdrop();
     } else {
@@ -582,7 +589,9 @@ export const createSheetGesture = (
                    * Backdrop should become enabled
                    * after the backdropBreakpoint value
                    */
-                  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
+                  const shouldEnableBackdrop =
+                    currentBreakpoint > backdropBreakpoint &&
+                    (baseEl as HTMLIonModalElement & { focusTrap?: boolean }).focusTrap !== false;
                   if (shouldEnableBackdrop) {
                     enableBackdrop();
                   } else {

packages/angular/test/base/e2e/src/lazy/modal-dynamic-wrapper.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Modals: Dynamic Wrapper', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/lazy/modal-dynamic-wrapper');
+  });
+
+  test('should render dynamic component inside modal', async ({ page }) => {
+    await page.locator('#open-dynamic-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+    await expect(page.locator('#dynamic-component-loaded')).toBeVisible();
+  });
+
+  test('should allow interacting with background content while sheet is open', async ({ page }) => {
+    await page.locator('#open-dynamic-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+
+    await page.locator('#background-action').click();
+
+    await expect(page.locator('#background-action-count')).toHaveText('1');
+  });
+
+  test('should prevent interacting with background content when focus is trapped', async ({ page }) => {
+    await page.locator('#open-focused-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+
+    // Attempt to click the background button via coordinates; click should be intercepted by backdrop
+    const box = await page.locator('#background-action').boundingBox();
+    if (box) {
+      await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+    }
+
+    await expect(page.locator('#background-action-count')).toHaveText('0');
+  });
+});

packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts

@@ -38,6 +38,7 @@ export const routes: Routes = [
       { path: 'modals', component: ModalComponent },
       { path: 'modal-inline', loadChildren: () => import('../modal-inline').then(m => m.ModalInlineModule) },
       { path: 'modal-sheet-inline', loadChildren: () => import('../modal-sheet-inline').then(m => m.ModalSheetInlineModule) },
+      { path: 'modal-dynamic-wrapper', loadChildren: () => import('../modal-dynamic-wrapper').then(m => m.ModalDynamicWrapperModule) },
       { path: 'view-child', component: ViewChildComponent },
       { path: 'keep-contents-mounted', loadChildren: () => import('../keep-contents-mounted').then(m => m.OverlayAutoMountModule) },
       { path: 'overlays-inline', loadChildren: () => import('../overlays-inline').then(m => m.OverlaysInlineModule) },

packages/angular/test/base/src/app/lazy/home-page/home-page.component.html

@@ -40,6 +40,11 @@
         Modal Sheet Inline Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/lazy/modal-dynamic-wrapper">
+      <ion-label>
+        Modal Dynamic Wrapper Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/lazy/router-link">
       <ion-label>
         Router link Test

packages/angular/test/base/src/app/lazy/modal-dynamic-wrapper/dynamic-component-wrapper.component.ts

@@ -0,0 +1,26 @@
+import { Component, ComponentRef, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+
+@Component({
+  selector: 'app-dynamic-component-wrapper',
+  template: `
+    <ion-content>
+      <ng-container #container></ng-container>
+    </ion-content>
+  `,
+  standalone: false
+})
+export class DynamicComponentWrapperComponent implements OnInit, OnDestroy {
+
+  @Input() componentRef?: ComponentRef<unknown>;
+  @ViewChild('container', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;
+
+  ngOnInit(): void {
+    if (this.componentRef) {
+      this.container.insert(this.componentRef.hostView);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.componentRef?.destroy();
+  }
+}

packages/angular/test/base/src/app/lazy/modal-dynamic-wrapper/dynamic-modal-content.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+
+@Component({
+  selector: 'app-dynamic-modal-content',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Dynamic Sheet Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <p id="dynamic-component-loaded">Dynamic component rendered inside wrapper.</p>
+      <ion-button id="dismiss-dynamic-modal" (click)="dismiss.emit()">Close</ion-button>
+    </ion-content>
+  `,
+  standalone: false
+})
+export class DynamicModalContentComponent {
+  @Output() dismiss = new EventEmitter<void>();
+}

packages/angular/test/base/src/app/lazy/modal-dynamic-wrapper/index.ts

@@ -0,0 +1,2 @@
+export * from './modal-dynamic-wrapper.component';
+export * from './modal-dynamic-wrapper.module';

packages/angular/test/base/src/app/lazy/modal-dynamic-wrapper/modal-dynamic-wrapper-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { ModalDynamicWrapperComponent } from ".";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ModalDynamicWrapperComponent
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class ModalDynamicWrapperRoutingModule { }

packages/angular/test/base/src/app/lazy/modal-dynamic-wrapper/modal-dynamic-wrapper.component.html

@@ -0,0 +1,8 @@
+<ion-button id="open-dynamic-modal" (click)="openModal()">Open Dynamic Sheet Modal</ion-button>
+<ion-button id="open-focused-modal" color="primary" (click)="openFocusedModal()">Open Focus-Trapped Sheet Modal</ion-button>
+<ion-button id="background-action" (click)="onBackgroundActionClick()">Background Action</ion-button>
+<p>
+  Background action count: <span id="background-action-count">{{ backgroundActionCount }}</span>
+</p>
+
+<ng-template #modalHost></ng-template>

packages/angular/test/base/src/app/lazy/modal-dynamic-wrapper/modal-dynamic-wrapper.component.ts

@@ -0,0 +1,104 @@
+import { Component, ComponentRef, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
+import { ModalController } from "@ionic/angular";
+import { DynamicComponentWrapperComponent } from "./dynamic-component-wrapper.component";
+import { DynamicModalContentComponent } from "./dynamic-modal-content.component";
+
+@Component({
+  selector: 'app-modal-dynamic-wrapper',
+  templateUrl: './modal-dynamic-wrapper.component.html',
+  standalone: false
+})
+export class ModalDynamicWrapperComponent implements OnDestroy {
+
+  @ViewChild('modalHost', { read: ViewContainerRef, static: true }) modalHost!: ViewContainerRef;
+
+  backgroundActionCount = 0;
+
+  private currentModal?: HTMLIonModalElement;
+  private currentComponentRef?: ComponentRef<DynamicModalContentComponent>;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  async openModal() {
+    await this.closeModal();
+
+    const componentRef = this.modalHost.createComponent(DynamicModalContentComponent);
+    this.modalHost.detach();
+    componentRef.instance.dismiss.subscribe(() => this.closeModal());
+
+    this.currentComponentRef = componentRef;
+
+    const modal = await this.modalCtrl.create({
+      component: DynamicComponentWrapperComponent,
+      componentProps: {
+        componentRef
+      },
+      breakpoints: [0, 0.2, 0.75, 1],
+      initialBreakpoint: 0.2,
+      backdropDismiss: false,
+      focusTrap: false,
+      handleBehavior: 'cycle'
+    });
+
+    this.currentModal = modal;
+
+    modal.onWillDismiss().then(() => this.destroyComponent());
+
+    await modal.present();
+  }
+
+  async openFocusedModal() {
+    await this.closeModal();
+
+    const componentRef = this.modalHost.createComponent(DynamicModalContentComponent);
+    this.modalHost.detach();
+    componentRef.instance.dismiss.subscribe(() => this.closeModal());
+
+    this.currentComponentRef = componentRef;
+
+    const modal = await this.modalCtrl.create({
+      component: DynamicComponentWrapperComponent,
+      componentProps: {
+        componentRef,
+      },
+      // Choose a higher initial breakpoint to ensure backdrop is active immediately
+      breakpoints: [0, 0.25, 0.5, 0.75, 1],
+      initialBreakpoint: 0.5,
+      // Keep backdrop active but do not dismiss on tap to avoid interfering with assertions
+      backdropDismiss: false,
+      // Explicitly enable focus trapping to block background interaction
+      focusTrap: true,
+      handleBehavior: 'cycle',
+    });
+
+    this.currentModal = modal;
+
+    modal.onWillDismiss().then(() => this.destroyComponent());
+
+    await modal.present();
+  }
+
+  async closeModal() {
+    if (this.currentModal) {
+      await this.currentModal.dismiss();
+      this.currentModal = undefined;
+    }
+
+    this.destroyComponent();
+  }
+
+  private destroyComponent() {
+    if (this.currentComponentRef) {
+      this.currentComponentRef.destroy();
+      this.currentComponentRef = undefined;
+    }
+  }
+
+  onBackgroundActionClick() {
+    this.backgroundActionCount++;
+  }
+
+  ngOnDestroy(): void {
+    this.destroyComponent();
+  }
+}