Skip to content

Conversation

@ShaneK
Copy link
Member

@ShaneK ShaneK commented Dec 5, 2025

Issue number: resolves #30700


What is the current behavior?

When a sheet modal with showBackdrop=false is rendered in a child route (nested ion-router-outlet), the parent content becomes non-interactive. Clicks on buttons or other interactive elements in the parent component are blocked, even though showBackdrop=false should allow background interaction.

Two separate issues contributed to this bug:

  1. Root locking with backdropBreakpoint: The shouldLockRoot logic in overlays.ts didn't account for backdropBreakpoint. Modals with backdropBreakpoint > 0 were still locking the root with aria-hidden, even though developers expect background interaction when the modal is below the backdrop breakpoint.
  2. Child route wrapper blocking: When a modal is in a child route, the child route's page wrapper (ion-page) and its parent ion-router-outlet remain in the DOM with position: absolute covering the viewport. Even after the modal is moved to ion-app and has pointer-events: none, these wrapper elements block clicks to the parent page's content.

This issue stems from #30563, which added root-locking behavior that didn't account for modals that allow background interaction. A partial fix in #30689 partially addressed showBackdrop=false and focusTrap=false, but missed backdropBreakpoint.

What is the new behavior?

Sheet modals with showBackdrop=false or focusTrap=false now correctly allow interaction with parent content when the modal is in a child route.
Improvements:

  • Recalculates isSheetModal in present() to handle Angular binding timing
  • Sets pointer-events: none on the modal element and its original parent elements when background interaction should be allowed
  • Cleans up pointer-events on dismiss
  • Adds regression tests

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev build:

8.7.12-dev.11765060985.14ad27fb

…e aren't allowing clicks through the background
@ShaneK ShaneK requested a review from a team as a code owner December 5, 2025 02:49
@ShaneK ShaneK requested a review from BenOsodrac December 5, 2025 02:49
@vercel
Copy link

vercel bot commented Dec 5, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
ionic-framework Ready Ready Preview Comment Dec 10, 2025 9:00pm

@ShaneK ShaneK marked this pull request as ready for review December 5, 2025 19:19
@ShaneK ShaneK changed the title fix(modal): allow interaction with parent content when sheet modal has showBackdrop=false in child routes fix(modal): allow interaction with parent content through sheet modals in child routes Dec 5, 2025
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The main thing is that I couldn't get the Angular page to interact for me. Please let me know if I just missed something.

…ages, caching page parent to prevent excessive searching
Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking requests. Looks good!

@ShaneK ShaneK added this pull request to the merge queue Dec 10, 2025
Merged via the queue into main with commit b9e3cf0 Dec 10, 2025
51 checks passed
@ShaneK ShaneK deleted the fix/sheet-modals branch December 10, 2025 21:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: core @ionic/core package package: react @ionic/react package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

4 participants