Yesterday, I upgraded my project from beta.7 to beta.8. And the modal animation stop to work for me. The page exists in DOM but on first step of animation: an opacity is 0.01 and a transform is moved.
Anybody know this issue? Thanks.
I think. I found where problem. In Alert component…
My logic: show confirmation alert, if cancel is clicked than close the alert, if agree - show modal. Here in beta.8 I have my issue. Alert doesn’t close. if I am clicking on agree button.
OK. fixed it.
confirm.dismiss().then(() => callback())
For more information Dismissing And Async Navigation
However, now I have a long animation. Anybody know how can I close the alert without animation?
Looking at the code it doesn’t seem to be possible. The ViewController.dismiss() method supports this, but it seems that Alert.dismiss() method is not accepting (and passing through) the NavOptions to the ViewController. However it sounds like a good idea so I opened a new issue about it:
1 Like
I’m experiencing the same issue. Tried to replace the page that should open with a completely empty page, but the opacity of the modal doesnt change from 0.01 (for both the ion-modal as the ion-page child of the modal). It also seems the constructor of the page in the modal is called twice.
This happend when upgrading to beta.8. Can’t publish the project since it’s private.
Since it’s and old project (been updating since around beta 3). I tried installing a fresh project and copying my code in it, error still exists.
Will try to track the error down.
I am one step further: I created an ActionSheet with buttons. This one triggers the modal:
buttons.push({
text: "Notificaties instellen",
handler: () => {
this.setNotifications("notifications");
}
});
This doesnt show the modal (it is being rendered though).
When i call setNotifications() from this method:
showModal() {
this.setNotifications("notifications");
}
by this button
<button block outline danger (click)="showModal()">
test
</button>
the modal does render and show. So i guess there’s a NgZone-Actionsheet related error?
It is. Wrapping the ActionSheet button call in this._ngZone.run(() => { }) does fix this behavior.
Maybe there’s some code that needs to be updated (and not directly copy-pasted) therefore I would suggest to check if you performed the update properly. If you missed something by the update, it might result in such problems. Check out the following post for more details:
Just read my solution.
Thats a different use-case and isn’t the issue in my case
I solved it by wrapping the call in the NgZone run.
By click on button you are showing the modal. So I still think that, what it’s same issue.
IMHO this is rather a workaround than a solution because if you need to use NgZone to trigger UI updates from code which is inside the Angular zone (which AFAIK is valid for the code in any Angular component unless the code is executed in an external library) then most probably there’s an underlying problem that’s breaking the Angular’s change detection (which you’ll have to solve sooner or later).
It sure is a hack. But i dont work around the angular detection (I don’t use any external tools in this part). So I think this is an issue which will get solved sooner or later by the angular team.
Best thing would be to report the issue. If I have some spare time left I will try to put together a plunker which describes the problem. If i can.
Relevant code
let buttons = [];
buttons.push({
text: "Notificaties instellen",
handler: () => {
this.setNotifications("notifications");
}
})
let settingsSheet = ActionSheet.create({
title: "Instellingen",
buttons: buttons
});
this.nav.present(settingsSheet).then(res => {
console.log("opened settings sheet")
}).catch(err => {
console.error("Couldnt open settingssheet", err)
});
setNotifications(type: string) {
let modal = Modal.create(SetNotificationsPage, { type: type });
this.nav.present(modal);
}
buttons.push({
text: "Notificaties instellen",
handler: () => {
settingsSheet.dismiss().then(() => this.setNotifications("notifications"));
}
})
Appears to be working. Thanks. I thought the sheet would dismiss itself on click.
It’s true, but you have the transition conflict here, therefore you must wait end of dismissal.
1 Like
I get it 
Maybe something to put in the docs? Personally i think this shouldn’t be neccesary. If ionic would close the actionsheet and then call the handler, there would be no problem right? I can’t imagine a situation in which you want to enfore an action and keep the actionsheet open.
It’s just like @xr0master explained - you have to wait until the ActionSheet transition finishes before starting a new one. I agree that this is tricky and shouldn’t be necessary but looking at the code it seems that the result of the handler determines if the ActionSheet is dismissed or not (therefore it’s not possible to call the handler after the transition). However it’s really questionable if this is really useful and used in the practice at all (I also can’t think of a use case for it at the moment).
1 Like