diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts index bc52b22fe..c23675e5c 100644 --- a/src/core/services/utils/dom.ts +++ b/src/core/services/utils/dom.ts @@ -71,6 +71,7 @@ export class CoreDomUtilsProvider { protected instances: WeakMap = new WeakMap(); // Store component/directive instances indexed by element. protected debugDisplay = false; // Whether to display debug messages. Store it in a variable to make it synchronous. protected displayedAlerts: Record = {}; // To prevent duplicated alerts. + protected displayedModals: Record = {}; // To prevent duplicated modals. protected activeLoadingModals: CoreIonLoadingElement[] = []; protected logger: CoreLogger; @@ -1690,26 +1691,37 @@ export class CoreDomUtilsProvider { async openModal( options: OpenModalOptions, ): Promise { - const { waitForDismissCompleted, closeOnNavigate, ...modalOptions } = options; const listenCloseEvents = closeOnNavigate ?? true; // Default to true. - const modal = await ModalController.create(modalOptions); + // TODO: Improve this if we need two modals with same component open at the same time. + const modalId = Md5.hashAsciiStr(options.component?.toString() || ''); + + const modal = this.displayedModals[modalId] + ? this.displayedModals[modalId] + : await ModalController.create(modalOptions); let navSubscription: Subscription | undefined; - if (listenCloseEvents) { - // Listen navigation events to close modals. - navSubscription = Router.events - .pipe(filter(event => event instanceof NavigationStart)) - .subscribe(async () => { - modal.dismiss(); - }); - } - await modal.present(); + if (!this.displayedModals[modalId]) { + // Store the modal and remove it when dismissed. + this.displayedModals[modalId] = modal; + + if (listenCloseEvents) { + // Listen navigation events to close modals. + navSubscription = Router.events + .pipe(filter(event => event instanceof NavigationStart)) + .subscribe(async () => { + modal.dismiss(); + }); + } + + await modal.present(); + } const result = waitForDismissCompleted ? await modal.onDidDismiss() : await modal.onWillDismiss(); navSubscription?.unsubscribe(); + delete this.displayedModals[modalId]; if (result?.data) { return result?.data;