Skip to content

bug: IonPopover is broken when used inside of IonModal #30130

Description

@DavAnaton

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Using IonPopover inside an IonModal opened with useIonModal doesn't catch any mouse event.

Expected Behavior

IonPopover should work the same, regardless of where it is used.

Steps to Reproduce

Inside a parent component, I have:

	const [open, dismiss] = useIonModal(ModalComponent);

The code of the modal is very simple:

function ModalComponent() {
  	return <>
             <div onClick={console.log}>click</div>
             <IonPopover isOpen={true}><div onClick={console.log}>click</div></IonPopover>
        </>
}

Clicking on the first div works, whereas clicking on the second doesn't.

Code Reproduction URL

https://stackblitz.com/edit/ek9ubvph?file=src%2Fmain.tsx

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/user/.nvm/versions/node/v20.18.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.3.2

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v20.18.0 (/Users/user/.nvm/versions/node/v20.18.0/bin/node)
npm : 11.0.0
OS : macOS Unknown

Additional Information

No response

Activity

  1. thetaPC commented on Oct 8, 2026

    @thetaPC
    Contributor

    Thanks for the report, and sorry for the delay.

    Verified fixed on 9.0.7. In older versions, an inline IonPopover placed inside a modal opened with useIonModal was moved out of the modal in the DOM when it opened, but React still expected its events to arrive through the modal. The click reached the element, and native addEventListener listeners ran, but React dropped the event before calling any onClick inside the popover. #31159 fixed this by rendering inline overlays through a React portal into the same container the popover moves to.

    Upgrade @ionic/react to 8.8.8 or later.

    This has the same cause as #27843, so I'm closing this one as a duplicate of it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions