binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
rahulramesha 2024-08-26 14:40:11 +05:30 • committed by GitHub
parent a0ed51c845
commit 890379b64f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/ui/src/dropdowns/custom-menu.tsx
View file

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

1
packages/ui/src/dropdowns/helper.tsx
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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