Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: [React] IonModal is not removed from DOM when parent component unmounts

See original GitHub issue

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

v4.x
v5.x
v6.x
Nightly

Current Behavior

When a component rendering an IonModal is unmounted by React, the ion modal DOM node is not removed.

Expected Behavior

Expected similar/same behavior as Ionic v5, where when a React component unmounts, the corresponding components being rendered by that component are also cleaned up. Even if there is no animation, I believe the DOM should be cleaned up

Steps to Reproduce

Have a component (Call it MyComponent) that renders an IonModal
Conditionally mount that component somewhere.
Toggle the modal to present by changing isOpen to true.
Now, without toggling the modal’s isOpen prop, simply toggle the mounting condition so React unmounts MyComponent.
The Modal is not removed from the DOM

Code Reproduction URL

https://codesandbox.io/s/ionic-6-3-3-modal-unmount-bug-0etb2k?file=/src/pages/Home.tsx No response

Ionic Info

Ionic React: 6.3.3

Additional Information

Link to codesandox example: https://codesandbox.io/s/ionic-6-3-3-modal-unmount-bug-0etb2k?file=/src/pages/Home.tsx

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:9 (6 by maintainers)

Top GitHub Comments

1reaction

sean-perkinscommented, Nov 8, 2022

Hello @puopg can you test with this dev-build and let me know if you run into any issues?

npm install @ionic/react@6.3.5-dev.11667931176.1678d34e @ionic/react-router@6.3.5-dev.11667931176.1678d34e

I’ve additionally forked your reproduction here: https://codesandbox.io/s/ionic-6-3-3-modal-unmount-bug-forked-dflgj8

0reactions

puopgcommented, Dec 14, 2022

@filip-dot-cube The PR is still open, so its not available on an official release to my understanding yet.

https://github.com/ionic-team/ionic-framework/pull/26245

Top Results From Across the Web

bug: Conditionally rendering ionModal in react - Failed to ...

The IonModal implementation in React does not have a framework delegate configured. This results in us manually removing the element from the DOM, ......

React-Bootstrap Modal - Error when unmounting from DOM

I am using react-bootstrap modal component. I wish to unmount from the page but experience an error that I am unable to pinpoint...

ion-modal: Ionic Mobile App Custom Modal ... - Ionic Framework

ion-modal is a dialog that appears on top of mobile app content, and must be dismissed before interaction resumes. Learn more about custom...

Avoid unnecessary remounting of DOM elements in React

Log to the console when it's mounted and unmounted from the DOM. class Child extends React.Component { componentDidMount ...

@ionic/core | Yarn - Package Manager

Fast, reliable, and secure dependency management.