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: useIonModal dismiss() does not unmount component

See original GitHub issue

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()

https://user-images.githubusercontent.com/14936212/123503005-2864f500-d61e-11eb-803a-7b20d4f0047b.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!

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:9 (7 by maintainers)

Top GitHub Comments

1reaction

liamdebeasicommented, Feb 15, 2022

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.

0reactions

ionitron-bot[bot]commented, Mar 17, 2022

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.

Top Results From Across the Web

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

I tried the fix with having const [isOpen, setIsOpen] = useState(true); inside the modal component. Unfortunately it does not dismiss the modal.

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

Ionic Modal On Dismiss Bug - Stack Overflow

But curiously this modal.onDismiss() passing data is not fired on the page when I'm on the web. It only fires when is a...

@ionic/angular | Yarn - Package Manager

Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase ......

Source - GitHub

... Bug Fixes * **react:** do not unmount overlay inner component until overlay is dismissed ([#22813](https://github.com/ionic-team/ionic/issues/22813)) ...