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

Activity

1. ionitron-bot

   added

   triage

   on Jul 24, 2023
2. zhbhun

   changed the title [-]bug: [/-] [+]bug: Modal in IonNav can't listen to click events.[/+] on Jul 24, 2023
3. liamdebeasi

   self-assigned this

   on Jul 25, 2023
4. liamdebeasi

   changed the title [-]bug: Modal in IonNav can't listen to click events.[/-] [+]bug: react, rendering modal from within nav does not bind click events[/+] on Jul 25, 2023
5. liamdebeasi

   added

   package: react@ionic/react package@ionic/react package

   type: buga confirmed bug reporta confirmed bug report

   on Jul 25, 2023
6. liamdebeasi

   removed their assignment

   on Jul 25, 2023
7. ionitron-bot

   removed

   triage

   on Jul 25, 2023
8. zhbhun commented on Aug 21, 2023

   

   zhbhun

   on Aug 21, 2023

   ContributorAuthor

   More actions

   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);
9. vu0tran commented on Nov 29, 2023

   

   vu0tran

   on Nov 29, 2023

   Last edited by vu0tran

   More actions

   Any updates on this one or tips for a workaround?

   👀React with 👀1Reacted by David Jones
10. liamdebeasi

    changed the title [-]bug: react, rendering modal from within nav does not bind click events[/-] [+]bug: react, rendering modal from within nav does not bind events[/+] on Jan 17, 2024
11. mhryshkin commented on Jan 17, 2024

    

    mhryshkin

    on Jan 17, 2024

    Last edited by mhryshkin

    More actions

    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.
12. zhbhun

    changed the title [-]bug: react, rendering modal from within nav does not bind events[/-] [+]bug: react, rendering modal within nav does not bind events[/+] on Jan 25, 2024
13. averyrousseau commented on Feb 5, 2024

    

    averyrousseau

    on Feb 5, 2024

    Contributor

    More actions

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

    added

    package: vue@ionic/vue package@ionic/vue package

    on Feb 5, 2024
15. averyrousseau

    changed the title [-]bug: react, rendering modal within nav does not bind events[/-] [+]bug: react/vue, rendering modal within nav does not bind events[/+] on Feb 5, 2024
16. brandyscarney

    added the

    Bug

    issue type on Oct 17, 2025
17. ShaneK commented on May 20, 2026

    

    ShaneK

    on May 20, 2026

    Member

    More actions

    Hey everyone! In React I have a PR up now that should fix this: #31159

    In Vue, this was fixed some time ago by #30227
18. ShaneK

    closed this as completedin #31159on May 20, 2026
19. pull

    added a commit that references this issue on May 20, 2026

    fix(react): bind events properly for overlays rendered within a nav (i…

    ...

    This issue will close once commit fa4593d is merged into the 'main' branch.

    fa4593d
20. ShaneK commented on May 20, 2026

    

    ShaneK

    on May 20, 2026

    Member

    More actions

    Thank you for your patience in this issue. The fix for this has been released in 8.8.8!

    🚀React with 🚀1Reacted by Matt Netkow
21. ionitron-bot commented on Jun 19, 2026

    

    ionitron-botBot

    on Jun 19, 2026 – with Ionitron Bot

    More actions

    Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
22. ionitron-bot

    locked and limited conversation to collaborators on Jun 19, 2026
23. HappyKnuckles

    added a commit that references this issue on Oct 3, 2026

    fix(react): bind events properly for overlays rendered within a nav (i…

    ...

    This issue will close once commit 6f27b81 is merged into the 'main' branch.

    6f27b81
24. thetaPC

    marked bug: IonPopover is broken when used inside of IonModal #30130 as a duplicate of this issue on Oct 8, 2026
25. thetaPC

    marked bug: react, mixing nested controller and inline overlays causes event handlers to not get bound #28819 as a duplicate of this issue on Oct 8, 2026