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

[kumibrr]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

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: https://github.com/ionic-team/ionic-framework/issues/30684 https://github.com/ionic-team/ionic-framework/issues/30040

[kumibrr]

@ShaneK Hi! I've mentioned you since you addressed https://github.com/ionic-team/ionic-framework/issues/30684.

I couldn't comment on the other issue, that's why I opened this one.

[ShaneK]

Fun thing about your reproductions, they actually had two different issues to solve (described in the PR)! Either way, my PR should address both of them.

Current dev build, if you'd like to try:

8.7.12-dev.11764961567.138743ff

[kumibrr]

@ShaneK Love to hear that! I guess I'm hitting ionic hard enough to break it!

I've tried 8.7.12-dev.11764961567.138743ff build on my project and it's solved partially. On initial load works perfectly, but if I navigate to the child route afterwards, the backdrop will stop being interactive

[ShaneK]

@ShaneK Love to hear that! I guess I'm hitting ionic hard enough to break it!

I've tried 8.7.12-dev.11764961567.138743ff build on my project and it's solved partially. On initial load works perfectly, but if I navigate to the child route afterwards, the backdrop will stop being interactive

Sorry, can you provide more information on how to reproduce this? I seem unable to

[kumibrr]

@ShaneK Okay, the issue is fixed with ion-router-outlet, but still happens when using angular's router-outlet. I was using it in my project to enable the viewTransitionsApi between child route transitions.

Here i'll drop the updated stackblitz with the reproduction https://stackblitz.com/edit/mqtw8e1i-brtmsuq5?file=src%2Fapp%2Fexample.component.ts

[ShaneK]

@ShaneK Okay, the issue is fixed with ion-router-outlet, but still happens when using angular's router-outlet. I was using it in my project to enable the viewTransitionsApi between child route transitions.

Here i'll drop the updated stackblitz with the reproduction https://stackblitz.com/edit/mqtw8e1i-brtmsuq5?file=src%2Fapp%2Fexample.component.ts

Hey @kumibrr ! Could you try my latest dev build? I accidentally left out the refreshing state that's often required for Angular because of how it uses data bindings.

New build:

8.7.12-dev.11765060985.14ad27fb

[kumibrr]

@ShaneK It's working flawlessly with the latest build! 🎉 Thank you so much for your work! 🚀

[ShaneK]

Hey! This has been deployed in v8.7.12