SIGN IN SIGN UP

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

0 0 107 TypeScript

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