Cannot close modal with canDismiss: false

Ionic Framework Ionic Angular
1

Hi all!

I’m using "@ionic/angular": "6.7.3" and I’ve noticed some strange behavior with modals and canDismiss property.

I set canDismiss to false in my component and create the modal:

  async openBlablaModal() {
    const blablaModal = await this.modalCtrl.create({
      component: BlablaModalComponent,
      canDismiss: false
    })
    await blablaModal.present()
  }

The modal appears, but when I trying to close it by code inside BlablaModalComponent:

  async closeModal() {
    await this.modalController.dismiss()
  }

nothing happens.

If I set canDismiss to true, it works perfectly.

I’ve tried with getTop() but it is the only visible modal.
And I’ve also tried adding an id and specifying it when trying to close the modal, but nothing.

Can anyone help me or maybe is it a bug?

2 Likes
2

That’s exactly what canDismiss is for. If you set it to false you can’t dismiss the modal.

Why are you setting it to false? In case where the modal should be be dismissed until some actiom happened for example you have to update the property to true before you dismiss it.

3

Thank you for your response.

But it’s strange how it works, isn’t it? I mean, I’m not supposed to let the user close the modal but I want to close it via code when the user does what I want, no?

I thought canDismiss was the “alternative” to the deprecated swipeToClose because if I set canDismiss to true, but backdropDismiss to false the user can close the modal via swipe.

I will investigate how to change the value from the modal when the user performs the requirements I need.

Thanks again

4

Hi again,
You are right, a simple callback solves my need.

I have misunderstood how canDismiss works.

This solves it:

  async openBlablaModal() {
    const blablaModal = await this.modalCtrl.create({
      component: BlablaModalComponent,
      canDismiss: (data?: any, role?: string) => {
        return new Promise<boolean>(resolve => resolve(role === "close"))
      }
    })
    await blablaModal.present()
  }

BlablaModalComponent:

  async closeModal() {
    await this.modalController.dismiss(undefined, "close")
  }

Thank you very much

5 Likes
5

Solve my issue with current faced situation, thank’s a lot getarjs

1 Like
6

if you have access to modal instance you can set canDismiss to true right before dismissing.

  blablaModal: HTMLIonModalElement;

  async openBlablaModal() {
    this.blablaModal = await this.modalCtrl.create({
      component: BlablaModalComponent,
      canDismiss: false
    })
    await blablaModal.present()
  }

  async closeBlablaModal() {
     this.blablaModal.canDismiss = true;
     await this.blablaModal.dismiss();
  }
7

@getarjs You saved my day!