From b6c2a77deb1c09eb1fd414f7737794e208ab5081 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 6 Mar 2020 10:11:20 -0500 Subject: [PATCH] fix(overlays): prevent accidental dismiss of overlays when tapping screen twice (#20683) fixes #20608 --- core/src/components/action-sheet/animations/ios.enter.ts | 6 +++++- core/src/components/action-sheet/animations/md.enter.ts | 6 +++++- core/src/components/alert/animations/ios.enter.ts | 6 +++++- core/src/components/alert/animations/md.enter.ts | 6 +++++- core/src/components/loading/animations/ios.enter.ts | 6 +++++- core/src/components/loading/animations/md.enter.ts | 6 +++++- core/src/components/modal/animations/ios.enter.ts | 6 +++++- core/src/components/modal/animations/md.enter.ts | 6 +++++- core/src/components/picker/animations/ios.enter.ts | 6 +++++- core/src/components/popover/animations/ios.enter.ts | 6 +++++- core/src/components/popover/animations/md.enter.ts | 6 +++++- 11 files changed, 55 insertions(+), 11 deletions(-) diff --git a/core/src/components/action-sheet/animations/ios.enter.ts b/core/src/components/action-sheet/animations/ios.enter.ts index faef96ff8f..0fb7754959 100644 --- a/core/src/components/action-sheet/animations/ios.enter.ts +++ b/core/src/components/action-sheet/animations/ios.enter.ts @@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.action-sheet-wrapper')!) diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts index 6d69774407..9f03de8ec5 100644 --- a/core/src/components/action-sheet/animations/md.enter.ts +++ b/core/src/components/action-sheet/animations/md.enter.ts @@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.action-sheet-wrapper')!) diff --git a/core/src/components/alert/animations/ios.enter.ts b/core/src/components/alert/animations/ios.enter.ts index 3abd5cf619..2aac5ac227 100644 --- a/core/src/components/alert/animations/ios.enter.ts +++ b/core/src/components/alert/animations/ios.enter.ts @@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.alert-wrapper')!) diff --git a/core/src/components/alert/animations/md.enter.ts b/core/src/components/alert/animations/md.enter.ts index 0e4e6eb612..2a98adbc9a 100644 --- a/core/src/components/alert/animations/md.enter.ts +++ b/core/src/components/alert/animations/md.enter.ts @@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.alert-wrapper')!) diff --git a/core/src/components/loading/animations/ios.enter.ts b/core/src/components/loading/animations/ios.enter.ts index e5d3c335f5..962c588857 100644 --- a/core/src/components/loading/animations/ios.enter.ts +++ b/core/src/components/loading/animations/ios.enter.ts @@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.loading-wrapper')!) diff --git a/core/src/components/loading/animations/md.enter.ts b/core/src/components/loading/animations/md.enter.ts index 9a6f45db21..dfba8b39cb 100644 --- a/core/src/components/loading/animations/md.enter.ts +++ b/core/src/components/loading/animations/md.enter.ts @@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.loading-wrapper')!) diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts index 884c0d4858..2d6c78b5b4 100644 --- a/core/src/components/modal/animations/ios.enter.ts +++ b/core/src/components/modal/animations/ios.enter.ts @@ -12,7 +12,11 @@ export const iosEnterAnimation = ( // The top translate Y for the presenting element const backdropAnimation = createAnimation() .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); const wrapperAnimation = createAnimation() .addElement(baseEl.querySelector('.modal-wrapper')!) diff --git a/core/src/components/modal/animations/md.enter.ts b/core/src/components/modal/animations/md.enter.ts index 0f0b2b767d..750d72d2d5 100644 --- a/core/src/components/modal/animations/md.enter.ts +++ b/core/src/components/modal/animations/md.enter.ts @@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.modal-wrapper')!) diff --git a/core/src/components/picker/animations/ios.enter.ts b/core/src/components/picker/animations/ios.enter.ts index d79166f6e1..c6a2c6ac1b 100644 --- a/core/src/components/picker/animations/ios.enter.ts +++ b/core/src/components/picker/animations/ios.enter.ts @@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.picker-wrapper')!) diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts index 3c94cc3072..0c3655ef32 100644 --- a/core/src/components/popover/animations/ios.enter.ts +++ b/core/src/components/popover/animations/ios.enter.ts @@ -104,7 +104,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement, ev?: Event): Animation => backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.popover-wrapper')!) diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts index b553316e1b..30cc2dbdce 100644 --- a/core/src/components/popover/animations/md.enter.ts +++ b/core/src/components/popover/animations/md.enter.ts @@ -86,7 +86,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement, ev?: Event): Animation => backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.popover-wrapper')!)