bug: conditionally rendered modal via route doesn't close when navigating away

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

After updating to ionic 6, Conditionally rendered ion-modals are not dismissing after changing routes. There’s a fix in route for an error that happened when the modal was removed from the dom https://github.com/ionic-team/ionic-framework/issues/25590 - but now the modal won’t dismiss when navigating away, and the animations aren’t happening - and the modal won’t dismiss after changing routes.

A route based conditionally rendered IonModal worked in ionic v5 - and I’ve been told this is a common pattern in a react app, so I would expect this to work out of the box.

Video:

Here’s a video of the simple demo I put together based off of a fork from the ionic-react-conference app https://user-images.githubusercontent.com/6452188/185195963-06ad49bf-0533-41ba-9f6e-0cb01326eff9.mov

Expected Behavior

When conditionally rendering an IonModal in React I would expect to be able to show/hide an ion modal based on a matched route. Ideally it would also animate in/out when mounting and unmounting (see video for hack workaround to get this working)

Steps to Reproduce

1. Install the dev build that fixes the original issue “Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.”
2. Add a Modal component that has prop isOpen={true}
3. Add a Switch & Route to the component
4. Inside the Modal Component change the route
5. Route to main component (“/support”), click on “New Support Ticket”, then click one of the back buttons
6. ⚠️ Notice the modal doesn’t close (see video above)

Step 1 yarn add @ionic/react@6.2.3-dev.11660337759.18ea0f7e and yarn add @ionic/react-router@6.2.3-dev.11660337759.18ea0f7e or npm i @ionic/react@6.2.3-dev.11660337759.18ea0f7e and npm i @ionic/react-router@6.2.3-dev.11660337759.18ea0f7e

Step 2 The SupportModal component above looks something like this: <IonModal isOpen>...

Step 3

...
<IonContent>
  <IonButton href="/support/new">New Support Ticket</IonButton>
</IonContent>
<Switch>
  <Route path="/support/new" exact component={SupportModal} />
</Switch>
...

Step 4 Add this to the SupportModal <IonButton href="/support">Go Back</IonButton>

Full code here: https://github.com/corysmc/ionic-react-conference-app

Code Reproduction URL

https://github.com/corysmc/ionic-react-conference-app

Ionic Info

Ionic:

Ionic CLI : 6.19.0 Ionic Framework : @ionic/react 6.2.3-dev.11660337759.18ea0f7e

Capacitor:

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

Utility:

cordova-res : not installed globally native-run : not installed globally

System:

NodeJS : v14.18.2 npm : 6.14.15 OS : macOS Monterey

Additional Information

Related issues https://github.com/ionic-team/ionic-framework/issues/25590 https://github.com/ionic-team/ionic-framework/issues/24887

[IhorHolovatsky]

@ionic/react@6.2.5-dev.11661455187.182badba works for me too. The modal unmounted correctly when navigating to another page

[liamdebeasi]

Thanks. While coupling modals with routing is an anti-pattern and not something we encourage, conditionally rendering the modal should remove the underlying Web Component. Let me take a closer look and see why this is happening.