A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
fix(react): bind events properly for overlays rendered within a nav (#31159)
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 - [x] No ## Other information This issue also reports the same problem in Vue, but that was fixed in #30227 Preview: [navigation-modal](https://ionic-framework-git-fw-6314-ionic1.vercel.app/react/navigation-modal) Dev build: ``` 8.8.8-dev.11779302602.17decfbf ```
S
Shane committed
fa4593d8a4d61a583dbf6fa551cd846fe258624f
Parent: 0182bba
Committed by GitHub <noreply@github.com>
on 5/20/2026, 8:07:04 PM