Angular Ionic, modal is not closing without setTimeout

Question

I'm facing an issue with the Ionic Modal Controller.

In my application, I have a QR modal. I want to handle the case when the backend sends an incorrect QR image. If the image fails to load, the error should be handled, and the modal should close with an error status.

I'm trying to dismiss the modal using this.modalController.dismiss(), but it doesn't work as expected. Sometimes it closes correctly, but other times it closes a previously opened modal. Since multiple modals can be open before the QR modal, dismissing the QR modal shouldn't affect them.

I've created a simple and similar implementation on StackBlitz for you to check.

stackblitz-demo

so in test-dialog.component.ts I try

handleError() { this.close('fail'); }

I have also tried something like:

async handleError() { const modal=await this.modalController.getTop() await modal?.dismiss('fail') }

but it does not work, only works with setTimeout(() => this.close('fail'), 100) but I dont want to use timeout or delay.

so my guess is race condition in event loop, when image fires error event in modalController modal is not yet registered or something like that, did anyone had simmillar issue?

So, when do you call your api and when do you open the modal? In other words: are you calling api before opening the modal or after, and do you call it from parent component or from the modal itself? I guess you call it from parent and open the modal in a method parallel to api call, so modal's behavior itself is independent from api response? I guess your best option would be to restructure the code, i.e. make sure that you either open the modal only if you get right api response (or else pop the error) or call api from modal itself. But, yeah, details are missing :) — Misha Mashina
– Misha Mashina, Commented Jan 11 at 7:01
@MishaMashina no issue is not api call, modal opens with all necesary data, just want to cover case when incorrect url or bad base64 string image is provided by backend. so if img does not load correctly, with angular (erorr) event on image tag should call handleError method, but I guess img (error) event fires before modal is registered in modalController. — Tobias Foxtrot
– Tobias Foxtrot, Commented Jan 11 at 12:07
Have you tried something like: modal.onDidDismiss().then(returnData => { this.openStatusModal(returnData.data ?? 'fail'); }); ? — Misha Mashina
– Misha Mashina, Commented Jan 11 at 14:45
look, that is the problem modal does not close. qr modal does not close on img error so onDidDissmiss will not do anything here. So problem is on img error dissmiss does not work as it should. I have checked stackblitz link that I provided, looks like link is broken, maybe try this: stackblitz.com/~/github.com/AKharitonashvili/ionic-modal — Tobias Foxtrot
– Tobias Foxtrot, Commented Jan 11 at 15:03
I'm afraid your stackblitz is not helping much, can you please provide more code in question? — Misha Mashina
– Misha Mashina, Commented Jan 11 at 16:54

Collectives™ on Stack Overflow

Angular Ionic, modal is not closing without setTimeout

0

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.