Cannot dismiss a modal by clicking the backdrop (ionic 6)

Ionic Framework
1

I migrated to ionic 6 recently and now I am unable to dismiss a modal by clicking the backdrop.

I find that the click is being blocked by this one element inside the ion-modal’s shadow DOM:
<div class="modal-shadow" style="opacity: 1;"></div>

In the inspector, I can solve this issue by adding display: none to the element above. However, in practice this wont work because the element isn’t accessible due to it being shadow DOM and not having a “part” property.

Any idea how I can make this work again?

Note:
I made sure that when I created the modal I added backdropDismiss: true. That should not be the problem.

1 Like
2

Not sure why but I solved it by adding “--height: auto;” to ion-modal’s css. This dismissed the modal-shadow :sweat_smile:

not very intuitive

1 Like
3

can you please post both TS code and CSS code please, I was also facing the same issue in IOS and my code is

this.presentModel = await this.modalCtrl.create({
          component: ProfileModelPage,
          cssClass: 'custom-modal profile-modal',
          backdropDismiss: true
        });
        this.presentModel.onWillDismiss().then((data) => {
          this.isModalOpened = false;
        });
        this.presentModel.present().then(() => {
          this.isModalOpened = true;
        });

CSS is like

.profile-modal {
    --height: 0;
    --width: 0;
}
.custom-modal::part(content),
.custom-modal .modal-wrapper {
    position: fixed !important;
    top: 45% !important;
    right: 5% !important;
    --width: 60% !important;
    --height: 35% !important;
    --border-radius: 6.2px !important;
    height: 45% !important;
    box-shadow: 0px 0px 5px #58595b !important;
}

This is working fine in android but I was having issue in IOS only

4

I was able to get this to work by setting the width and height on the custom class. “–height: auto;” as mentioned in the solution just made my modal disappear. Originally I was adding padding to get the modal to be smaller than the screen width/height, but the modal-shadow wouldn’t allow me to dismiss when I did that.

.custom-ion-modal {
  --width: calc(100% - 40px);
  --height: calc(100% - 100px);
}
5

same here on ionic6.1.13 - web and android backdropdismiss on every pixel up until the ion-modal div, but ios doesn’t dismiss even when clicking in the app corners far away from the div. Solution was to add to the general variables.scss that --height:auto; to the ion-modal general class.

Selecting cssClass with this: (angular)

 const modal = await this.modalController.create({
      component: WarehouseSelectorModalComponent,
      cssClass: 'warehouseSelectModal',

CSS:

// strangeness: without this line, ios won-t backdropdismiss
.numberEntryModal {
 --height:auto;
}

.numberEntryModal::part(content) {
 border-radius: 10px;
  background: var(--ion-color-light);
  color: var(--ion-color-light-contrast);
  display: flex;
  height: 390px;
  width: 250px;
}

(I don’t like doing this, as I don’t know what it does :grimacing: - but it “works”)

6

That worked for me too! Thanks a lot, was already 2h on this bug.

If it can help someone, this is how I did, first adding a custom class to the modal:

  async openFightResult(fightResult: any) {
    const modal = await this.modalCtrl.create({
      component: FightResultComponent,
      componentProps: { fightResult },
      cssClass: 'fight-result-modal',
      enterAnimation: this.enterAnimation,
      leaveAnimation: this.leaveAnimation
    });
    modal.present();
  }

Then puting --height: auto in it from global.scss

.fight-result-modal {
  --width: 85%;
  --background: transparent;
  --height: auto;
}

Edit:
In fact I also HAD TO change the size component size with ngAfterViewInit

  ngAfterViewInit() {
    setTimeout(() => {
      const ionCard = this.el.nativeElement.querySelector('ion-card');
      const modal = this.el.nativeElement;
      this.renderer.setStyle(modal, 'height', ionCard.offsetHeight + 115 + 'px');
    }, 100);
  }

Completely sure there is a best way to do so, if someone found I’d be glad to modify it.
However my use case is precise: I didn’t want to have a fixed height let’s say 60% because otherwise the backdropDismiss wouldn’t work outside of my component which has a transparent background so the user couldn’t know where to click outside of it.