fix(react): bind events properly for overlays rendered within a nav

[ShaneK]

Issue number: resolves #27843

---

What is the current behavior?

createInlineOverlayComponent renders inline overlays (modal, popover, etc.) inside a <template> at their declared JSX position. When the overlay presents, CoreDelegate teleports the DOM node into ion-app, but React's synthetic event delegation root stays at the original JSX parent. Once the overlay lives outside that subtree, React no longer dispatches events to children inside it, so onClick, onChange, and other handlers inside an IonModal rendered within an IonNav silently stop firing

What is the new behavior?

Top-level inline overlays now render through createPortal into the same ion-app container that CoreDelegate teleports into, so React's event root follows the DOM

Does this introduce a breaking change?

• Yes
• No

Other information

This issue also reports the same problem in Vue, but that was fixed in #30227

Preview: navigation-modal

Dev build:

8.8.8-dev.11779302602.17decfbf

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	May 20, 2026 6:26pm

[brandyscarney]

Nice fix! 👍