Repository navigation
bug: canDismiss option doesn't work when used in modal controller #27753
Description
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
- Run example in attached URL and click 'Open'.
- 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
Activity
liamdebeasi commentedon Jul 6, 2023
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
canDismissis working correctly.bbonczek commentedon Jul 7, 2023
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 commentedon Jul 7, 2023
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.
docs(modal): clarify swipe to close section
bbonczek commentedon Jul 10, 2023
Thanks!
ionitron-bot commentedon Aug 9, 2023
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.