feat: add a property canDismiss to overlays

[188599]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

I'd like a way to pass a validation function that should be called before dismissing a modal (or just overlays in general), akin to Angular's CanDeactivate that's implemented on their routes.

Describe Preferred Solution

Ideally, you should be able to pass function that can returns a () => (boolean | Promise<boolean> | Observable<boolean>) during the create method of the overlay, or even after it was already created. When the overlay calls the dismiss method, it should before anything, execute this function and if it resolves to true, proceed with closing it, otherwise maintain it open.

Related Code

const modal = await this.modalCtrl.create({
  ...
  canDismiss: () => true
});

...
    
modal.canDismiss = () => Promise.resolve(false);

Additional Context

Just to explain why I would like to see this.

Some of our forms are used inside modals. Currently we have a problem with them, specifically on Android, because of it's hardware back button the user can simply close the modal by pressing it.

Overriding the the hardware back button is not a very good solution, since it's a modal we have to pass the highest priority to the subscribeWithPriority method, it would override all the calls to it, including those happening when there's another overlay on top of it, and I'm not very sure how we could circumvent that.

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #22297. The issue was originally intended only for the card-style modals, but I think this would be useful to have for any kind of modal in Ionic Framework.

[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.