Sheet Modal presents two modals upon rapid clicking

Ionic Framework
1

I noticed that in a project that I was working on, along with the reference document examples, that when you are using a Sheet Modal and you click the button to present the modal in rapid succession, you can launch multiple modals.

async edit(item: Item) {
        const modal = await this.modalCtrl.create({
            component: ModalPage,
            componentProps: { id: item.id },
            breakpoints: [0, 0.6],
            initialBreakpoint: 0.6
        });

        modal.onWillDismiss().then(() => {
            const slidingItem = document.getElementById('item-' + item.id) as any;
            slidingItem.close();
        });
        
        await modal.present();
    }

Is this an issue, or have I just implemented incorrectly?

2

it’s the normal behavior

if you want to “handle” it you can always use a boolean variable with which disabling / enabling modal open-button

for example

on page enter you set isModalOpen = false;
when you open the modal you set isModalOpen = true;
on modal dismiss you set it again to false

and your html code

<ion-button [disabled]="isModalOpen"> Open Modal </ion-button>
1 Like
3

Sometimes it’s the easiest answer that is the hardest to think of.

Thank you!

4

you are welcome :slight_smile:
don’t hesitate to let me know if you need any further help