Make quick action dropdowns use capture phase of the event to trigger closure on outside click (#5414)

packages/ui/src/dropdowns/custom-menu.tsx

@@ -35,6 +35,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     tabIndex,
     closeOnSelect,
     openOnHover = false,
+    useCaptureForOutsideClick = false,
   } = props;
 
   const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
@@ -88,7 +89,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     }
   };
 
-  useOutsideClickDetector(dropdownRef, closeDropdown);
+  useOutsideClickDetector(dropdownRef, closeDropdown, useCaptureForOutsideClick);
 
   let menuItems = (
     <Menu.Items className={cn("fixed z-10", menuItemsClassName)} static>

packages/ui/src/dropdowns/helper.tsx

@@ -17,6 +17,7 @@ export interface IDropdownProps {
   optionsClassName?: string;
   placement?: Placement;
   tabIndex?: number;
+  useCaptureForOutsideClick?: boolean;
 }
 
 export interface ICustomMenuDropdownProps extends IDropdownProps {

packages/ui/src/hooks/use-outside-click-detector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 
 // TODO: move it to helpers package
-const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void, useCapture = false) => {
   const handleClick = (event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as Node)) {
       // get all the element with attribute name data-prevent-outside-click
@@ -31,10 +31,10 @@ const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: ()
   };
 
   useEffect(() => {
-    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("mousedown", handleClick, useCapture);
 
     return () => {
-      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("mousedown", handleClick, useCapture);
     };
   });
 };

web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -163,6 +163,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
         placement={placements}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx

@@ -125,6 +125,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
         placement={placements}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -183,6 +183,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx

@@ -115,6 +115,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         placement={placements}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -180,6 +180,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -174,6 +174,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {