fix(modal, popover): quickly opening modal/popover no longer presents…

… duplicates (#24697)
ionic-team · Feb 2, 2022 · 928c5fb · 928c5fb
1 parent 0b18260
commit 928c5fb
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);