Ionic-framework: Modal display called in ionViewDidEnter shows twice

[kelvindart]

Short description of the problem:

I had a problem previously reported in #6062 whereby a modal was displaying twice when called in ionViewDidEnter: immediately after dismissing it, it would show again. And after dismissing it a second time it would hide.

@jgw96 very kindly showed an altered Plunker which suggested I check the NavController's length() property to ensure it's !== 2 before proceeding (check previous issue with said Plunker).

However, in [email protected] we now present modals using a ModalController which means we have lost the ability to check the length and as a result, the bug has crept back in.

Help! 😅

What behavior are you expecting?

A modal is appearing twice, immediately being shown after being dismissed the first time. I am expecting it to remain hidden after displaying the first time and dismissing it.

Steps to reproduce:

1. Clone the following repository: https://github.com/kelvindart/ionic-modal
2. Add the iOS platform via ionic platform add ios (at the time this is 4.2.0)
3. Run it in an emulator (I ran it in an iOS 9.3 emulator, i.e. the latest)
4. Observe the modal displaying, dismiss it and observe it displaying again.
5. Dismiss the modal and observe it no longer displaying it.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Check my repository of the uploaded code (unfortunately I could not find a Ionic 2 beta 11 Plunker template): https://github.com/kelvindart/ionic-modal

Clone this, and add the platform as per the replication steps above and observe!

Which Ionic Version? 2.0.0-beta.11

Plunker that shows an example of your issue

As above - no Plunker but please reference the Git repo.

Run ionic info from terminal/cmd prompt: (paste output below)

Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.1
Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello! Thanks for opening an issue with us! So, this is kind of embarrassing but i never hit freeze on the plunker after i changed it to a better solution and therefore you would not have been able to see it. I have since re-saved that plunker to show the correct solution for how to stop this from happening. Very sorry about that! If you use the solution now in that plunker everything will work fine. Thanks!

[kelvindart]

Nice - thanks @jgw96 😄! Just after a brief explanation - but why do we disable fireOtherLifecycles when displaying a modal? I.e., what other lifecycles are interfering and causing it to close?

Thanks so much for your help dude 😁 - I really appreciate it.

[jgw96]

No problem at all 😃 ! So because you are opening your modal in ionViewDidEnter the modal was originally opening twice because fireOtherLifecycles makes whatever you are pushing onto the nav stack (a modal in this case) fire the lifecycle events of the page its being pushed from. Therefore when the page is loaded ionViewDidEnter fires (like it should) and opens the modal. Then, when the modal opens it causes ionViewDidEnter to be fired again on the main page your opening the modal from, therefore opening the modal a second time. Hope all that makes sense!

[kelvindart]

That does! Perfectly explained and that helps huge amounts for understanding - thanks so much @jgw96! 😃

[jgw96]

No problem! Glad to help! Have fun on your Ionic 2 adventures 😃

[kelvindart]

Hey @jgw96 - sorry to be a pain but can this be reopened? :(

There seems to be an issue using fireOtherLifecycles if your modal being presented has an ion-select; the ion-select is unusable unfortunately as you can't change the item nor confirm/cancel the box.

[kelvindart]

I also have a feeling this relates to my subsequent issue: #7948(?).

[kelvindart]

Hey @jgw96 - just curious, is it better to open a separate issue for the <ion-select>s?

[jgw96]

@kelvindart sorry for the delay on this! Would you mind opening a new issue regarding your bug with ion-select? Thanks!

[kelvindart]

Hey @jgw96 - no worries! Awesome! Let me raise it now.

I will create another git repo, is there a preferred method to do provide an example (Plunker is out-of-date with beta 10 being its latest)? At least with Github you can clone/run on the emulator, etc.?

[jgw96]

Good question! Preferred method at the moment to provide an example is either a code snippet or Github repo. The plunker is broken with beta.11 at the moment because of some issues with npmcdn. Also, it is usually much more efficient for me to test with a git repo than with a plunker (plunker is weird sometimes and can cause odd issues).

[kelvindart]

Awesome - that works perfectly for me too! Five more minutes and you should see it raised :). Thanks!

[crabbydavis]

@jgw96 I realize this was a year ago, but I'm having the same issue in ionic 3. What is fireOtherLifecycles a method of? I've been trying to find it but can't seem to.

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