javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal, popover): quickly opening modal/popover no longer presents duplicates (#24697)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-02-02 13:38:17 -05:00
committed by GitHub
parent 0b18260da6
commit 928c5fbfcb
5 changed files with 8 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/modal/modal.scss
View File

@ -48,13 +48,6 @@
outline: none; outline: none;
contain: strict; contain: strict;
pointer-events: none;
}
:host(.modal-interactive) .modal-wrapper,
:host(.modal-interactive) ion-backdrop {
pointer-events: auto;
} }
:host(.overlay-hidden) { :host(.overlay-hidden) {

3
core/src/components/modal/modal.tsx
View File

@ -587,7 +587,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
const showHandle = handle !== false && isSheetModal; const showHandle = handle !== false && isSheetModal;
const mode = getIonMode(this); const mode = getIonMode(this);
const { presented, modalId } = this; const { modalId } = this;
const isCardModal = presentingElement !== undefined && mode === 'ios'; const isCardModal = presentingElement !== undefined && mode === 'ios';
return ( return (
@ -605,7 +605,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
[`modal-card`]: isCardModal, [`modal-card`]: isCardModal,
[`modal-sheet`]: isSheetModal, [`modal-sheet`]: isSheetModal,
'overlay-hidden': true, 'overlay-hidden': true,
'modal-interactive': presented,
...getClassMap(this.cssClass) ...getClassMap(this.cssClass)
}} }}
id={modalId} id={modalId}

7
core/src/components/popover/popover.scss
View File

@ -42,13 +42,6 @@
color: $popover-text-color; color: $popover-text-color;
z-index: $z-index-overlay; z-index: $z-index-overlay;
pointer-events: none;
}
:host(.popover-interactive) .popover-content,
:host(.popover-interactive) ion-backdrop {
pointer-events: auto;
} }
:host(.overlay-hidden) { :host(.overlay-hidden) {

3
core/src/components/popover/popover.tsx
View File

@ -565,7 +565,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
render() { render() {
const mode = getIonMode(this); 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 desktop = isPlatform('desktop');
const enableArrow = arrow && !parentPopover && !desktop; const enableArrow = arrow && !parentPopover && !desktop;
@ -584,7 +584,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
[mode]: true, [mode]: true,
'popover-translucent': this.translucent, 'popover-translucent': this.translucent,
'overlay-hidden': true, 'overlay-hidden': true,
'popover-interactive': presented,
'popover-desktop': desktop, 'popover-desktop': desktop,
[`popover-side-${side}`]: true, [`popover-side-${side}`]: true,
'popover-nested': !!parentPopover 'popover-nested': !!parentPopover

7
core/src/utils/overlays.ts
View File

@ -502,8 +502,13 @@ export const dismiss = async (
activeAnimations.delete(overlay); 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.classList.add('overlay-hidden');
overlay.el.style.removeProperty('pointer-events');
} catch (err) { } catch (err) {
console.error(err); console.error(err);