From 890379b64fa6eb672d8ea3d473df4523023a8886 Mon Sep 17 00:00:00 2001 From: rahulramesha <71900764+rahulramesha@users.noreply.github.com> Date: Mon, 26 Aug 2024 14:40:11 +0530 Subject: [PATCH] Make quick action dropdowns use capture phase of the event to trigger closure on outside click (#5414) --- packages/ui/src/dropdowns/custom-menu.tsx | 3 ++- packages/ui/src/dropdowns/helper.tsx | 1 + packages/ui/src/hooks/use-outside-click-detector.tsx | 6 +++--- .../issue-layouts/quick-action-dropdowns/all-issue.tsx | 1 + .../issue-layouts/quick-action-dropdowns/archived-issue.tsx | 1 + .../issue-layouts/quick-action-dropdowns/cycle-issue.tsx | 1 + .../issue-layouts/quick-action-dropdowns/draft-issue.tsx | 1 + .../issue-layouts/quick-action-dropdowns/module-issue.tsx | 1 + .../issue-layouts/quick-action-dropdowns/project-issue.tsx | 1 + 9 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx index 00e8c3e2a..0059e6498 100644 --- a/packages/ui/src/dropdowns/custom-menu.tsx +++ b/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(null); @@ -88,7 +89,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => { } }; - useOutsideClickDetector(dropdownRef, closeDropdown); + useOutsideClickDetector(dropdownRef, closeDropdown, useCaptureForOutsideClick); let menuItems = ( diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx index 8566f183b..56963cbf4 100644 --- a/packages/ui/src/dropdowns/helper.tsx +++ b/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 { diff --git a/packages/ui/src/hooks/use-outside-click-detector.tsx b/packages/ui/src/hooks/use-outside-click-detector.tsx index c1a477803..608b88df0 100644 --- a/packages/ui/src/hooks/use-outside-click-detector.tsx +++ b/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, callback: () => void) => { +const useOutsideClickDetector = (ref: React.RefObject, 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, callback: () }; useEffect(() => { - document.addEventListener("mousedown", handleClick); + document.addEventListener("mousedown", handleClick, useCapture); return () => { - document.removeEventListener("mousedown", handleClick); + document.removeEventListener("mousedown", handleClick, useCapture); }; }); }; diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx index 2c12ed18b..9ecbe44d0 100644 --- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx +++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx @@ -163,6 +163,7 @@ export const AllIssueQuickActions: React.FC = observer((props placement={placements} menuItemsClassName="z-[14]" maxHeight="lg" + useCaptureForOutsideClick closeOnSelect > {MENU_ITEMS.map((item) => { diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx index 2134da80f..ece43e585 100644 --- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx +++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx @@ -125,6 +125,7 @@ export const ArchivedIssueQuickActions: React.FC = observer(( placement={placements} menuItemsClassName="z-[14]" maxHeight="lg" + useCaptureForOutsideClick closeOnSelect > {MENU_ITEMS.map((item) => { diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx index 6e5187b64..2a08bac9d 100644 --- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx +++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx @@ -183,6 +183,7 @@ export const CycleIssueQuickActions: React.FC = observer((pro portalElement={portalElement} menuItemsClassName="z-[14]" maxHeight="lg" + useCaptureForOutsideClick closeOnSelect > {MENU_ITEMS.map((item) => { diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx index cdf5c4bc6..58807aee2 100644 --- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx +++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx @@ -115,6 +115,7 @@ export const DraftIssueQuickActions: React.FC = observer((pro placement={placements} menuItemsClassName="z-[14]" maxHeight="lg" + useCaptureForOutsideClick closeOnSelect > {MENU_ITEMS.map((item) => { diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx index 1bfa57d06..8ec30042b 100644 --- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx +++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx @@ -180,6 +180,7 @@ export const ModuleIssueQuickActions: React.FC = observer((pr portalElement={portalElement} menuItemsClassName="z-[14]" maxHeight="lg" + useCaptureForOutsideClick closeOnSelect > {MENU_ITEMS.map((item) => { diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx index c47d76af7..40b53090b 100644 --- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx +++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx @@ -174,6 +174,7 @@ export const ProjectIssueQuickActions: React.FC = observer((p portalElement={portalElement} menuItemsClassName="z-[14]" maxHeight="lg" + useCaptureForOutsideClick closeOnSelect > {MENU_ITEMS.map((item) => {