bug: react/vue, rendering modal within nav does not bind events

[zhbhun]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Modal content does not respond to click events.

Expected Behavior

Modal content should be able to respond to click events.

Steps to Reproduce

1. Create a new demo by react and ionic v7.
2. Using IonNav to manage route.
3. Adding a modal in page of IonNav.
4. Listen click event of modal content.
5. Try click modal content.

Code Reproduction URL

https://stackblitz.com/edit/stackblitz-starters-xh6gbc

Ionic Info

Ionic:
Ionic Framework : @ionic/react 7.1.3

System:
NodeJS : v16.19.1
npm : 8.19.3
OS : macOS

Additional Information

No response

[zhbhun]

I found that ion-modal is using CoreDelegate to modify the insertion position of DOM elements at display time, which is causing the react event proxy mechanism to break down. Hopefully this will help speed up the fix.

1. ionic-framework/core/src/components/modal/modal.tsx

   Line 450 in 77707b8

   this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);

2. ionic-framework/core/src/utils/framework-delegate.ts

   Line 131 in 77707b8

   app.appendChild(BaseComponent);

[vu0tran]

Any updates on this one or tips for a workaround?

[mhryshkin]

Any updates on this one or tips for a workaround?

I've been struggling with the same issue recently. The workaround I found to enable the usage of IonNav is as follows: (Note: I had actually re-implemented much of my project to use IonNav before I discovered this issue.)

<Modal isOpen={true}>
    <IonNav
        root={() => (
           ... The content of your modal.
         )}
         ></IonNav>
    </Modal>

So, what I'm doing is adding a nested IonNav for the modal, and it works perfectly. This has been the easiest workaround I've found.

[amandaejohnston]

Confirming that this also reproduces in Vue, but not Angular (including standalone).