bug: canDismiss option doesn't work when used in modal controller

[bbonczek]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Using this code:

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  constructor(private modalCtrl: ModalController) {}

  async openModal() {
    const modal = await this.modalCtrl.create({
      component: ModalExampleComponent,
      canDismiss: true,
    });
    modal.present();

    const { data, role } = await modal.onWillDismiss();
  }
}

opens a modal that is not dismissable.

Expected Behavior

Modal should be dismissable, as canDismiss option has been set to true.

Steps to Reproduce

1. Run example in attached URL and click 'Open'.
2. Try to dismiss modal with gesture.

Code Reproduction URL

https://stackblitz.com/edit/angular-1akhtj-j7fysu?file=src%2Fapp%2Fexample.component.ts

Ionic Info

➜  ionic info

Ionic:

   Ionic CLI                     : 7.1.1 (/Users/redacted/.nvm/versions/node/v18.12.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.0.9
   @angular-devkit/build-angular : 15.2.8
   @angular-devkit/schematics    : 15.2.8
   @angular/cli                  : 15.2.8
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.0.4
   @capacitor/android : 5.0.4
   @capacitor/core    : 5.0.4
   @capacitor/ios     : 5.0.4

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.2

System:

   NodeJS : v18.12.1 (/Users/redacted/.nvm/versions/node/v18.12.1/bin/node)
   npm    : 8.19.2
   OS     : macOS Unknown
   Xcode  : Xcode 14.2 Build version 14C18

Additional Information

This feature appears to be working fine, when using inline <ion-modal> element. Only ModalController is affected. Example in the documentation using <ion-modal> approach is fine: https://stackblitz.com/edit/angular-qwjldx?file=src%2Fapp%2Fexample.component.html

[liamdebeasi]

Thanks for the report. Ionic seems to be working as intended here. Your modal does not have a gesture, so swiping to dismiss the modal should not do anything. Pressing the "Escape" key does dismiss the modal, which would indicate canDismiss is working correctly.

[bbonczek]

Hi @liamdebeasi, thanks for a response. Could you share what should be done in the example to allow dismissing modal with a gesture? According to the documentation, this should be the default behaviour - it says that you can prevent dismissing modal by gesture by excluding 'gesture' role.

Developers may want to prevent users from swiping to close a modal. This can be done by setting a callback function for canDismiss and checking if the role is not gesture.

[liamdebeasi]

The swiping only applies to card or sheet modals, and the demo at that link uses a card modal. I opened ionic-team/ionic-docs#3021 to clarify this on the docs.

[bbonczek]

Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.