[Enhancement] Modal: Alert before close

[jakobe]

It should be possible to add an (optional) alert configuration when calling modalController.showModal(config) and opening the modal window.
The alert should be shown when dismissing the modal (clicking the close button or esc key) and depending on the user interaction (true/false) the modal dismisses or not.

Note: If there is no hook for cancelling the dismissal (e.g. onModalWillDismiss => true/false) then we should limit the dismiss to the close button and handle the alert before calling modalController.hideTopMost()

[labanos]

moving to after release 1 for now - might reconsider if it highly needed by more teams than (team2?) - also workarounds might be possible?

[bommariusser]

@labanos @jakobe @hafstad can we talk about this on monday?

[bduphl]

I would like to suggest that presentation of the alert depends on a condition. For instance, only show an alert when something is typed in an input field within the component.

[bommariusser]

@hafstad det er ikke lavet endnu eller?

[alxzak]

This issue will be closed due to backlog prioritization and pruning.
#1704 (comment)

[LVinther]

@alxzak can this issue be reopened? We need it in team 3 :)

[henrikvoetmand]

With the updated modal behavior, where you can drag to close on the entire modal dialog, it is even more important to have this "Alert before close" functionality. (The new modal behavior comes with the Ionic 6 upgrade)

[mark-drastrup]

Ionic 6 provides a way to prevent a modal from being dismissed, by passing in a boolean or a callback that returns a boolean. https://ionicframework.com/docs/api/modal#setting-a-callback-function. We can utilize the canDismiss callback to show an alert, that either prevents or allows the modal to be closed.

Here is a working POC that is based on the example in the Ionic documentation:

modal.helper.ts

const canDismiss = async () => {
  const actionSheet = await this.actionSheetCtrl.create({
    header: 'Are you sure?',
    buttons: [
      {
        text: 'Yes',
        role: 'confirm',
      },
      {
        text: 'No',
        role: 'cancel',
      },
    ],
  });

  actionSheet.present();

  const { role } = await actionSheet.onWillDismiss();

  return role === 'confirm';
};

const ionModal = await this.ionicModalController.create({
  component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
  cssClass: [
    'kirby-overlay',
    'kirby-modal',
    config.flavor === 'drawer' ? 'kirby-drawer' : null,
    config.flavor === 'compact' ? 'kirby-modal-compact' : null,
    modalSize ? 'kirby-modal-' + modalSize : null,
    config.interactWithBackground ? 'interact-with-background' : null,
    ...customCssClasses,
  ],
  backdropDismiss: config.flavor === 'compact' || config.interactWithBackground ? false : true,
  showBackdrop: !config.interactWithBackground,
  componentProps: { config: config },
  swipeToClose: config.flavor != 'compact',
  presentingElement: modalPresentingElement,
  keyboardClose: false,
  canDismiss: canDismiss, <-------------
  enterAnimation,
  leaveAnimation,
});

We could follow this approach and make it possible for the developers to pass in an alert config instead of the hardcoded actionsheet.