Modal dismiss: how to abort dismiss if changes are pending

Ionic Framework
1

Hello. I have a form to edit data in a modal. When somebody clicks the backdrop, I would like to check first that no change is pending, and suggest user:
a) to keep editing (or saving), which cancels the modal dismiss
b) to confirm, which closes the modal dismiss

If I set backdropDismiss property to false, I won’t achieve what I want (unless there is an event like ‘onBackdropClick’)

If I use onWillDismiss, I don’t know how to cancel the dismiss event if I want to.

Any idea?

2

I tried to listen at ionBackdropTap, to control the actions on backdrop tap, with backdropDismiss: false used the modal props.

However, the ionBackdropTap is only triggered when backdropDismiss is set to true.

Shall I report a bug for that behaviour, or is it normal?

3

i think this is the norma behaviour, you can open it as a Feature Request. Is there maybe a Solution to return a boolean on onWillDismiss?

4

Regular readers of this column are probably familiar with my stance on nested modals (I hate them). So I would really urge you to solicit advice from usability professionals about the design in general.

That being said, I would expect this to be doable by manually instantiating your own <ion-backdrop> in the host page (not the modal) and listening to its ionBackdropTap.

5

Thanks, I had same idea in mind, I opened a feature request

6

I guess using a regular page rather than a modal is good for navigability and linkability?
Thanks for the comment, I will think about it

When I use <ion-backdrop> in the host component, the backdrop doesn’t show up (i.e. it is not visible, but it actually dismisses when tapped).
This must be because of showBackdrop: false property set in modal component.

Also, if I set backdropDismiss: false in the modal’s properties, then this will prevent the <ion-backdrop> element from the parent page to dismiss, even with tappable="true".

This is what I put in the host page (at the top, above <ion-header>):

<ion-backdrop *ngIf="showBackdrop" visible="true" tappable="true"></ion-backdrop>

with showBackdrop set to true when the modal is presented.

Edit: but as explained it doesn’t work, as showBackdrop: true with backdropDismiss: false prevents the <ion-backdrop> tag to work (tap event not triggered).

1 Like
7

That’s another reason I hadn’t considered, but my primary concern is that modals are supposed to be for urgent things that require immediate concise action, after which the user can get back to whatever they were doing with minimal distraction. When they start layering, I find it impossible to fulfill that contract.

What you have there is more-or-less exactly what I was envisioning.

8

OK, in my case there is no more than one modal layer, so I’m fine from that perspective.

Also, what you envisioned doesn’t work as I tried to explain (edited my post above)

9

A good solution was suggested:

catching the backdrop click using simply a click event, rather than the ionBackdropTap event.
I handled the dismissing logic with that, and added the ion-backdrop { cursor: pointer; } to global.scss as the default style wasn’t applied anymore when backdropDismiss modal’s property is set to false.
Works just fine.

10

For some reason, this is not working as of today anymore (I’m still on Ionic 5, as when I opened this post).
It is possible to select the ion-backdrop element, however catching a click event on the element seems to have no effect.

See:

const backdropElt = document.querySelector('ion-backdrop');
console.log(backdropElt); // does print the element
backdropElt.addEventListener('click', (e) => {
  console.log('Backdrop click event'); // does not print when backdrop is clicked
});

Any idea how to catch the click event of an <ion-backdrop> element?

11

@manu_ionic could you solve this?

12

Could someone please fix this?