Fix: Trigger outsideClickListener in capture phase to handle stopPropagation

This commit addresses the issue where the overlay in components does not hide
when clicking outside the component, if the click event is stopped using
stopPropagation on an element or its parents.

The solution changes the event listener for detecting outside clicks to be
triggered in the capture phase instead of the bubbling phase.
This ensures that the outside click is correctly detected even if
stopPropagation is called.
pull/7233/head
Mehdi Rande 2025-02-11 18:34:43 +01:00
parent 9e35aa1804
commit f6293cf4f5
15 changed files with 30 additions and 30 deletions

View File

@ -791,12 +791,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -573,12 +573,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -472,12 +472,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -233,12 +233,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -428,12 +428,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -591,12 +591,12 @@ export default {
this.selfClick = false;
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
this.selfClick = false;
}

View File

@ -215,12 +215,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -463,12 +463,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -307,12 +307,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -451,12 +451,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -773,12 +773,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -215,12 +215,12 @@ export default {
this.selfClick = false;
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
this.selfClick = false;
}

View File

@ -734,12 +734,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -463,12 +463,12 @@ export default {
}
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},

View File

@ -388,12 +388,12 @@ export default {
this.selfClick = false;
};
document.addEventListener('click', this.outsideClickListener);
document.addEventListener('click', this.outsideClickListener, true);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
document.removeEventListener('click', this.outsideClickListener, true);
this.outsideClickListener = null;
}
},