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.11764961567.138743ff

…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 5, 2025 7:06pm

@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
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

3 participants