feat: return data from modal even when not explicitly calling dismiss method

[mariusbolik]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

My App currently displays a list with various items. The user can click on an item and edit it in a modal. When the modal dismisses, the list should show the changes the user had made. I can use this.modalCtrl.dismiss(value); only if the user clicks on the "save" button. But I also want to pass the edited object to the previous page when the user swipes down to close the modal or clicks on the backdrop.

Describe Preferred Solution

A good solution would be an event that will be triggered if the modal is is going to be dismissed. A good example is the calendar app: https://streamable.com/7etj0s This event could be used to prevent the modal from closing and show some info to the user. This event could also be used to trigger this.modalCtrl.dismiss(value); and pass data to page by using swipe-to-close.

Describe Alternatives

I tried to call this.modalCtrl.dismiss(value); in ionViewWillLeave. But the passed object was undefined.

[not-a-designer]

I have found it to be a missing feature on PopoverController as well

[damida80]

Yes, I don't understand, why so many people are satisfied with the current behavior. Maybe we are using the Modal in a wrong way? I am using a "page", which I open with a Modalcontroller in Angular. So I can't use it as an "inline Modal". The controller itself is not able to listen to @Output variables. So the things happening inside the Modal are totally black boxed for the parent.

So. Imagine in that Modal page a user can enter or change various data, add new items etc. When the user presses "Save", then the dismiss function is called within the Modal window and data is sent back to the parent. So far so good. Like expected and it's just a wonderful UX. But. When the user swipes the modal, all the data is lost. No chance to intercept here. Of course I could prevent "dismissing by swiping" with the usage of an async function, but then the whole nice behavior of a modal is obsolete.

So my question is, why can we manually dismiss a modal with data, while the normal dismissing by swipe does not send any data at all? I still have not found a proper solution, even in the new documentation that scenario is not covered.

[damida80]

I found a nice workaround by doing it the Angular native way, hopefully it helps:

When you use the ModalController, you actually can bind some methods - and therefore you can change parents (complex) objects from within the child:

The properties of the ModalController (parent):

componentProps: {
    'ionic': isGreat,
    'anotherDataVariable': data,
    'submitDataToParent': ((childModalData: any) => this.data = childModalData).bind(this)
}

The Modal Page (child) holding a lot of data:

@Input() submitDataToParent: (childData: any) => void;

You just need to call this.submitDataToParent() inside the Modal Page whenever childData changes. By doing that you won't loose any child data, when you swipe the Modal to close.