Skip to content

bug: sheet modals can't skip focus-traps on child routes #30700

@kumibrr

Description

@kumibrr

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Background content in sheet modals is not interactive if the sheet modal is in a child route.

Expected Behavior

Background content in sheet modals should be interactive if the sheet modal is in a child route.

Steps to Reproduce

  1. Install an Ionic Angular project
  2. Create a child route.
  3. Add a sheet modal according to the documentation to the child route.
  4. Add RouterOutlet to parent
  5. Add clickable items on the parent route.
  6. Try to press the buttons that are behind the sheet modal.

Code Reproduction URL

https://stackblitz.com/edit/mqtw8e1i?file=src%2Fapp%2Froutes%2Fmodal.component.ts
https://stackblitz.com/edit/cst7dxnw-nv2jzmi5?file=src%2FPage1.tsx

Ionic Info

Ionic:
Ionic CLI: 7.2.1
Ionic Framework: @ionic/angular 8.7.5
@angular-devkit/build-angular: not installed
@angular-devkit/schematics: not installed
@angular/cli: 20.3.3
@ionic/angular-toolkit: 12.3.0
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS: v20.18.1
npm: 10.8.2
OS: macOS Unknown

Additional Information

Related issues: #30684 #30040

Metadata

Metadata

Assignees

No one assigned

    Labels

    type: buga confirmed bug report

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions