bug: ionic react, modal inner component unmounted too early

[nickwang0808]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
when closing <IonModal isOpen={showModal} /> via setting showModal to false, the modal would exit with a flicker, it does not flicker away when closing is with the ESC key on the keyboard

Expected behavior:
the modal should animate the same way as if it was close with the ESC key, aka smoothly

Steps to reproduce:
simply create a modal and toggle it with showModal state in React

Related code:

please see codesandbox example here
https://codesandbox.io/s/zealous-poincare-1sih7?file=/src/pages/Home.tsx

all logical code is in src/components/home directory

Other information:
please see the gif below, first, 2 clicks are with the mouse, last 2 are with the ESC key, notice how with the ESC key it slides out but with a mouse click it flickers to white while sliding out

Ionic info:

at the end I would like to thank the ionic team for making something this exceptional, and I appreciate any help from you.

[liamdebeasi]

Thanks for the issue. It looks like the modal's inner component is being unmounted too early. It should be unmounted after the onDidDismiss not after onWillDismiss.

[nickwang0808]

Thanks for the issue. It looks like the modal's inner component is being unmounted too early. It should be unmounted after the onDidDismiss not after onWillDismiss.

thank you for you quick reply.
so is there anything I can do on my end or is it something on the ionic side?

[liamdebeasi]

This is a bug on the Ionic side, but we are looking into a fix now.

[nickwang0808]

This is a bug on the Ionic side, but we are looking into a fix now.

thank you very much!

[liamdebeasi]

Can you try the following dev build and let me know if it resolve the issue?

npm install @ionic/react@5.6.0-dev.202101131554.1c08e5b @ionic/react-router@5.6.0-dev.202101131554.1c08e5b

I would give this a try in one of your local applications. CodeSandbox seems to have trouble installing dev builds of Ionic.

[nickwang0808]

Can you try the following dev build and let me know if it resolve the issue?

npm install @ionic/react@5.6.0-dev.202101131554.1c08e5b @ionic/react-router@5.6.0-dev.202101131554.1c08e5b

I would give this a try in one of your local applications. CodeSandbox seems to have trouble installing dev builds of Ionic.

Yes it seems like this dev build has the bug fixed!

[liamdebeasi]

Glad it is working now! This has been resolved via #22763, and a fix will be available in an upcoming release of Ionic Framework.

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