diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx index 316cc6960..9df40f1a8 100644 --- a/packages/ui/src/dropdowns/custom-menu.tsx +++ b/packages/ui/src/dropdowns/custom-menu.tsx @@ -34,6 +34,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => { onMenuClose, tabIndex, closeOnSelect, + openOnHover = false, } = props; const [referenceElement, setReferenceElement] = React.useState(null); @@ -68,12 +69,24 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => { if (closeOnSelect) closeDropdown(); }; - const handleMenuButtonClick = (e:React.MouseEvent)=>{ + const handleMenuButtonClick = (e: React.MouseEvent) => { e.stopPropagation(); - e.preventDefault() + e.preventDefault(); isOpen ? closeDropdown() : openDropdown(); if (menuButtonOnClick) menuButtonOnClick(); - } + }; + + const handleMouseEnter = () => { + if (openOnHover) openDropdown(); + }; + + const handleMouseLeave = () => { + if (openOnHover && isOpen) { + setTimeout(() => { + closeDropdown(); + }, 500); + } + }; useOutsideClickDetector(dropdownRef, closeDropdown); @@ -111,6 +124,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => { className={cn("relative w-min text-left", className)} onKeyDownCapture={handleKeyDown} onClick={handleOnClick} + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} > {({ open }) => ( <> @@ -203,4 +218,4 @@ const MenuItem: React.FC = (props) => { CustomMenu.MenuItem = MenuItem; -export { CustomMenu }; +export { CustomMenu }; \ No newline at end of file diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx index 93ac63b97..0eda5ac5c 100644 --- a/packages/ui/src/dropdowns/helper.tsx +++ b/packages/ui/src/dropdowns/helper.tsx @@ -28,6 +28,7 @@ export interface ICustomMenuDropdownProps extends IDropdownProps { onMenuClose?: () => void; closeOnSelect?: boolean; portalElement?: Element | null; + openOnHover?: boolean; } export interface ICustomSelectProps extends IDropdownProps {