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

[corysmc]

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 #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
#25590
#24887

[liamdebeasi]

Thanks for the issue. Are you able to provide a repo that contains only the minimum amount of code required to reproduce this issue? I am getting import errors when I try to run your app, possibly due to outdated dependencies.

[corysmc]

Hmm that's interesting , maybe because I was using yarn instead of npm.
I was able to reproduce again by cloning to my other computer, running npm install and npm start - It did change my package-lock file - so I've committed those changes. Can you try again @liamdebeasi ?
Thanks

[corysmc]

@liamdebeasi - here's an even smaller repo: https://github.com/corysmc/test-route-modal

[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.

[corysmc]

Thanks @liamdebeasi - I really appreciate it! I totally agree about the anti-pattern. I'll see if we can make the change internally to use modals properly.

For reference here's another related issue
#23567

[sean-perkins]

Hey @corysmc can you test with this dev-build and let me know if you run into any odd quirks?

npm i @ionic/react@6.2.5-dev.11661455187.182badba @ionic/react-router@6.2.5-dev.11661455187.182badba

I tested with the test-route-modal repository and it appears to dismiss correctly on route actions.