fix: fixes #18190, replace outside click listeners w/ mousedown

Author: cetincakiroglu

packages/primeng/src/confirmpopup/confirmpopup.ts

@@ -410,7 +410,7 @@ export class ConfirmPopup extends BaseComponent implements AfterContentInit, OnD
 
     bindDocumentClickListener() {
         if (!this.documentClickListener) {
-            let documentEvent = isIOS() ? 'touchstart' : 'click';
+            let documentEvent = isIOS() ? 'touchstart' : 'mousedown';
             const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : this.document;
 
             this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {

packages/primeng/src/contextmenu/contextmenu.ts

@@ -625,7 +625,7 @@ export class ContextMenu extends BaseComponent implements OnInit, AfterContentIn
             if (!this.documentClickListener) {
                 const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : 'document';
 
-                this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {
+                this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', (event) => {
                     if (this.containerViewChild.nativeElement.offsetParent && this.isOutsideClicked(event) && !event.ctrlKey && event.button !== 2 && this.triggerEvent !== 'click') {
                         this.hide();
                     }

packages/primeng/src/megamenu/megamenu.ts

@@ -1241,7 +1241,7 @@ export class MegaMenu extends BaseComponent implements AfterContentInit, OnDestr
     bindOutsideClickListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.outsideClickListener) {
-                this.outsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
+                this.outsideClickListener = this.renderer.listen(this.document, 'mousedown', (event) => {
                     const isOutsideContainer = this.container?.nativeElement !== event.target && !this.container?.nativeElement.contains(event.target);
 
                     if (isOutsideContainer) {

packages/primeng/src/menu/menu.ts

@@ -753,7 +753,7 @@ export class Menu extends BaseComponent implements AfterContentInit, OnDestroy {
         if (!this.documentClickListener && isPlatformBrowser(this.platformId)) {
             const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : 'document';
 
-            this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {
+            this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', (event) => {
                 const isOutsideContainer = this.containerViewChild?.nativeElement && !this.containerViewChild?.nativeElement.contains(event.target);
                 const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
                 if (!this.popup && isOutsideContainer && isOutsideTarget) {

packages/primeng/src/menubar/menubar.ts

@@ -1163,7 +1163,7 @@ export class Menubar extends BaseComponent implements AfterContentInit, OnDestro
     bindOutsideClickListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.outsideClickListener) {
-                this.outsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
+                this.outsideClickListener = this.renderer.listen(this.document, 'mousedown', (event) => {
                     const isOutsideContainer = this.rootmenu.el.nativeElement !== event.target && !this.rootmenu.el.nativeElement.contains(event.target);
                     const isOutsideMenuButton = this.mobileActive && this.menubutton.nativeElement !== event.target && !this.menubutton.nativeElement.contains(event.target);
 

packages/primeng/src/overlay/overlay.ts

@@ -558,7 +558,7 @@ export class Overlay extends BaseComponent implements AfterContentInit, OnDestro
 
     bindDocumentClickListener() {
         if (!this.documentClickListener) {
-            this.documentClickListener = this.renderer.listen(this.document, 'click', (event) => {
+            this.documentClickListener = this.renderer.listen(this.document, 'mousedown', (event) => {
                 const isTargetClicked = this.targetEl && ((this.targetEl as any).isSameNode(event.target) || (!this.isOverlayClicked && (this.targetEl as any).contains(event.target)));
                 const isOutsideClicked = !isTargetClicked && !this.isOverlayContentClicked;
                 const valid = this.listener ? this.listener(event, { type: 'outside', mode: this.overlayMode, valid: event.which !== 3 && isOutsideClicked }) : isOutsideClicked;

packages/primeng/src/overlaypanel/overlaypanel.ts

@@ -236,7 +236,7 @@ export class OverlayPanel extends BaseComponent implements AfterContentInit, OnD
     bindDocumentClickListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.documentClickListener) {
-                let documentEvent = isIOS() ? 'touchstart' : 'click';
+                let documentEvent = isIOS() ? 'touchstart' : 'mousedown';
                 const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : this.document;
 
                 this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {

packages/primeng/src/popover/popover.ts

@@ -221,7 +221,7 @@ export class Popover extends BaseComponent implements AfterContentInit, OnDestro
     bindDocumentClickListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.documentClickListener) {
-                let documentEvent = isIOS() ? 'touchstart' : 'click';
+                let documentEvent = isIOS() ? 'touchstart' : 'mousedown';
                 const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : this.document;
 
                 this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {

packages/primeng/src/speeddial/speeddial.ts

@@ -730,7 +730,7 @@ export class SpeedDial extends BaseComponent implements AfterViewInit, AfterCont
     bindDocumentClickListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.documentClickListener && this.hideOnClickOutside) {
-                this.documentClickListener = this.renderer.listen(this.document, 'click', (event) => {
+                this.documentClickListener = this.renderer.listen(this.document, 'mousedown', (event) => {
                     if (this.visible && this.isOutsideClicked(event)) {
                         this.hide();
                     }

packages/primeng/src/tieredmenu/tieredmenu.ts

@@ -1185,7 +1185,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy {
     bindOutsideClickListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.outsideClickListener) {
-                this.outsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
+                this.outsideClickListener = this.renderer.listen(this.document, 'mousedown', (event) => {
                     const isOutsideContainer = this.containerViewChild && !this.containerViewChild.nativeElement.contains(event.target);
                     const isOutsideTarget = this.popup ? !(this.target && (this.target === event.target || this.target.contains(event.target))) : true;
                     if (isOutsideContainer && isOutsideTarget) {
@@ -1198,7 +1198,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy {
 
     unbindOutsideClickListener() {
         if (this.outsideClickListener) {
-            document.removeEventListener('click', this.outsideClickListener);
+            document.removeEventListener('mousedown', this.outsideClickListener);
             this.outsideClickListener = null;
         }
     }