From 928c5fbfcbf3ef1b2c3074464fc20dcf1fe143ae Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 2 Feb 2022 13:38:17 -0500
Subject: [PATCH] fix(modal, popover): quickly opening modal/popover no longer
 presents duplicates (#24697)

---
 core/src/components/modal/modal.scss     | 7 -------
 core/src/components/modal/modal.tsx      | 3 +--
 core/src/components/popover/popover.scss | 7 -------
 core/src/components/popover/popover.tsx  | 3 +--
 core/src/utils/overlays.ts               | 7 ++++++-
 5 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 80f9284774..8a7b291cac 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -48,13 +48,6 @@
   outline: none;
 
   contain: strict;
-
-  pointer-events: none;
-}
-
-:host(.modal-interactive) .modal-wrapper,
-:host(.modal-interactive) ion-backdrop {
-  pointer-events: auto;
 }
 
 :host(.overlay-hidden) {
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index c1e1a996c5..1d2b1736c2 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -587,7 +587,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     const showHandle = handle !== false && isSheetModal;
     const mode = getIonMode(this);
-    const { presented, modalId } = this;
+    const { modalId } = this;
     const isCardModal = presentingElement !== undefined && mode === 'ios';
 
     return (
@@ -605,7 +605,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
           [`modal-card`]: isCardModal,
           [`modal-sheet`]: isSheetModal,
           'overlay-hidden': true,
-          'modal-interactive': presented,
           ...getClassMap(this.cssClass)
         }}
         id={modalId}
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
index eff12f2c50..da67813ad7 100644
--- a/core/src/components/popover/popover.scss
+++ b/core/src/components/popover/popover.scss
@@ -42,13 +42,6 @@
   color: $popover-text-color;
 
   z-index: $z-index-overlay;
-
-  pointer-events: none;
-}
-
-:host(.popover-interactive) .popover-content,
-:host(.popover-interactive) ion-backdrop {
-  pointer-events: auto;
 }
 
 :host(.overlay-hidden) {
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index 21f5a68d04..2dd5c25085 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -565,7 +565,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
 
   render() {
     const mode = getIonMode(this);
-    const { onLifecycle, popoverId, parentPopover, dismissOnSelect, presented, side, arrow, htmlAttributes } = this;
+    const { onLifecycle, popoverId, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
     const desktop = isPlatform('desktop');
     const enableArrow = arrow && !parentPopover && !desktop;
 
@@ -584,7 +584,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
           [mode]: true,
           'popover-translucent': this.translucent,
           'overlay-hidden': true,
-          'popover-interactive': presented,
           'popover-desktop': desktop,
           [`popover-side-${side}`]: true,
           'popover-nested': !!parentPopover
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 075b9e618a..da9b3b806b 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -502,8 +502,13 @@ export const dismiss = async (
 
     activeAnimations.delete(overlay);
 
-    // Make overlay hidden again in case it is being reused
+    /**
+     * Make overlay hidden again in case it is being reused.
+     * We can safely remove pointer-events: none as
+     * overlay-hidden will set display: none.
+     */
     overlay.el.classList.add('overlay-hidden');
+    overlay.el.style.removeProperty('pointer-events');
 
   } catch (err) {
     console.error(err);