From f6293cf4f51d45f33795d2255207a92beea5b981 Mon Sep 17 00:00:00 2001
From: Mehdi Rande <mehdi.rande@bluemind.net>
Date: Tue, 11 Feb 2025 18:34:43 +0100
Subject: [PATCH] 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.
---
 packages/primevue/src/autocomplete/AutoComplete.vue   | 4 ++--
 packages/primevue/src/cascadeselect/CascadeSelect.vue | 4 ++--
 packages/primevue/src/colorpicker/ColorPicker.vue     | 4 ++--
 packages/primevue/src/confirmpopup/ConfirmPopup.vue   | 4 ++--
 packages/primevue/src/contextmenu/ContextMenu.vue     | 4 ++--
 packages/primevue/src/datatable/ColumnFilter.vue      | 4 ++--
 packages/primevue/src/drawer/Drawer.vue               | 4 ++--
 packages/primevue/src/megamenu/MegaMenu.vue           | 4 ++--
 packages/primevue/src/menu/Menu.vue                   | 4 ++--
 packages/primevue/src/menubar/Menubar.vue             | 4 ++--
 packages/primevue/src/multiselect/MultiSelect.vue     | 4 ++--
 packages/primevue/src/popover/Popover.vue             | 4 ++--
 packages/primevue/src/select/Select.vue               | 4 ++--
 packages/primevue/src/tieredmenu/TieredMenu.vue       | 4 ++--
 packages/primevue/src/treeselect/TreeSelect.vue       | 4 ++--
 15 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/packages/primevue/src/autocomplete/AutoComplete.vue b/packages/primevue/src/autocomplete/AutoComplete.vue
index 9f26a4b81..0b6a512bf 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.vue
+++ b/packages/primevue/src/autocomplete/AutoComplete.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.vue b/packages/primevue/src/cascadeselect/CascadeSelect.vue
index 4b63b68f7..96107c77a 100644
--- a/packages/primevue/src/cascadeselect/CascadeSelect.vue
+++ b/packages/primevue/src/cascadeselect/CascadeSelect.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/colorpicker/ColorPicker.vue b/packages/primevue/src/colorpicker/ColorPicker.vue
index e730a8198..d146a9f95 100755
--- a/packages/primevue/src/colorpicker/ColorPicker.vue
+++ b/packages/primevue/src/colorpicker/ColorPicker.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/confirmpopup/ConfirmPopup.vue b/packages/primevue/src/confirmpopup/ConfirmPopup.vue
index 20afdae90..0be606d94 100644
--- a/packages/primevue/src/confirmpopup/ConfirmPopup.vue
+++ b/packages/primevue/src/confirmpopup/ConfirmPopup.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/contextmenu/ContextMenu.vue b/packages/primevue/src/contextmenu/ContextMenu.vue
index 6efa832fe..b6956e1d5 100755
--- a/packages/primevue/src/contextmenu/ContextMenu.vue
+++ b/packages/primevue/src/contextmenu/ContextMenu.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/datatable/ColumnFilter.vue b/packages/primevue/src/datatable/ColumnFilter.vue
index fdd93b1de..d6d38976e 100644
--- a/packages/primevue/src/datatable/ColumnFilter.vue
+++ b/packages/primevue/src/datatable/ColumnFilter.vue
@@ -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;
             }
diff --git a/packages/primevue/src/drawer/Drawer.vue b/packages/primevue/src/drawer/Drawer.vue
index 8619d17e7..0faa5da1a 100755
--- a/packages/primevue/src/drawer/Drawer.vue
+++ b/packages/primevue/src/drawer/Drawer.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/megamenu/MegaMenu.vue b/packages/primevue/src/megamenu/MegaMenu.vue
index b7a5ac07a..c2fdbe52c 100755
--- a/packages/primevue/src/megamenu/MegaMenu.vue
+++ b/packages/primevue/src/megamenu/MegaMenu.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/menu/Menu.vue b/packages/primevue/src/menu/Menu.vue
index b232a84db..e49b2a1e6 100644
--- a/packages/primevue/src/menu/Menu.vue
+++ b/packages/primevue/src/menu/Menu.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/menubar/Menubar.vue b/packages/primevue/src/menubar/Menubar.vue
index 7b9d9b81c..449edd836 100755
--- a/packages/primevue/src/menubar/Menubar.vue
+++ b/packages/primevue/src/menubar/Menubar.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/multiselect/MultiSelect.vue b/packages/primevue/src/multiselect/MultiSelect.vue
index c10e2d13c..a60ef55e2 100755
--- a/packages/primevue/src/multiselect/MultiSelect.vue
+++ b/packages/primevue/src/multiselect/MultiSelect.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/popover/Popover.vue b/packages/primevue/src/popover/Popover.vue
index f6dcc344f..459f53c1b 100755
--- a/packages/primevue/src/popover/Popover.vue
+++ b/packages/primevue/src/popover/Popover.vue
@@ -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;
             }
diff --git a/packages/primevue/src/select/Select.vue b/packages/primevue/src/select/Select.vue
index af07edaf3..5a52cf696 100755
--- a/packages/primevue/src/select/Select.vue
+++ b/packages/primevue/src/select/Select.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/tieredmenu/TieredMenu.vue b/packages/primevue/src/tieredmenu/TieredMenu.vue
index 6b00a67c2..671bbfe36 100755
--- a/packages/primevue/src/tieredmenu/TieredMenu.vue
+++ b/packages/primevue/src/tieredmenu/TieredMenu.vue
@@ -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;
             }
         },
diff --git a/packages/primevue/src/treeselect/TreeSelect.vue b/packages/primevue/src/treeselect/TreeSelect.vue
index f6af50dbf..cb2ba049a 100644
--- a/packages/primevue/src/treeselect/TreeSelect.vue
+++ b/packages/primevue/src/treeselect/TreeSelect.vue
@@ -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;
             }
         },