Skip to content

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

@DavAnaton

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

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