bug: useIonModal dismiss() does not unmount component

[babycourageous]

Bug Report

Ionic version:

[ ] 4.x
[ x] 5.x
[ ] 6.x

Current behavior:

The new useIonModal hook does not unmount the component that is being used as the modal when dismiss() is called.

Expected behavior:

The present function mounts the component and the dismiss function unmounts and removes the component from the React tree.

Steps to reproduce:

Follow the docs for useIonModal

Related code:
Below is a video of the react component tree as i present and dismiss the modal using the return tuple from useIonModal()

ionic-modal-hook-test.mov

Ionic info:

Ionic:

   Ionic CLI       : 5.4.16 (/Users/rene/.npm/_npx/23301/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 5.6.10

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.7

Utility:

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

System:

   NodeJS : v12.16.3 (/Users/rene/.nvm/versions/node/v12.16.3/bin/node)
   npm    : 6.14.4
   OS     : macOS Mojave```

Thanks!

[liamdebeasi]

Thanks for the issue. Could you reproduce this issue in an Ionic starter app and provide a link to the repo? I see you also reported #23516, so feel free to just re-use the reproduction from there.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[babycourageous]

Hi Liam

Absolutely, here ya go!
https://github.com/babycourageous/ionic-react-modal-hook-issue

[liamdebeasi]

I can reproduce this behavior. Likely related to #23516 given that the overlay is not rendered within the app context.

[babycourageous]

Thanks for the update @liamdebeasi !

Yeah, i figured the two had some crossover.

[babycourageous]

Hi @liamdebeasi - sorry to ping this issue- but wanted to see if it makes sense to close this issue as something that won't be addressed for v5.
I saw that #24008 was merged into the "next" branch and #23516 is closed. I can confirm v6 modal mounts and unmounts as expected; so i was curious if it would only be addressed for v6. If so, I totally understand if this is a not-fix for v5 and you can close this issue accordingly.

Thanks again!

[liamdebeasi]

Thanks for the ping! I can confirm that this issue will only be fixed in Ionic 6. Ionic 5 is only receiving critical security fixes now.

I am going to close this as this issue is resolved in Ionic 6.

[babycourageous]

Thanks so much @liamdebeasi ! That officially nudges us to upgrade to v6! ;)

[ionitron-bot]

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.