diff --git a/.changeset/fine-lines-warn.md b/.changeset/fine-lines-warn.md new file mode 100644 index 0000000000..25bd3e7491 --- /dev/null +++ b/.changeset/fine-lines-warn.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Fixed Menu component trigger button not toggling correctly. Removed custom click-outside handler that was interfering with React Aria's built-in state management, allowing the menu to properly open and close when clicking the trigger button. diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx index 75cdbe5e21..fa86f67700 100644 --- a/packages/ui/src/components/Menu/Menu.tsx +++ b/packages/ui/src/components/Menu/Menu.tsx @@ -33,7 +33,6 @@ import { RouterProvider, Virtualizer, ListLayout, - OverlayTriggerStateContext, } from 'react-aria-components'; import { useStyles } from '../../hooks/useStyles'; import { MenuDefinition } from './definition'; @@ -56,7 +55,6 @@ import { } from '@remixicon/react'; import { useNavigate, useHref } from 'react-router-dom'; import { isExternalLink } from '../../utils/isExternalLink'; -import { useRef, useEffect, useContext } from 'react'; import styles from './Menu.module.css'; import clsx from 'clsx'; @@ -98,33 +96,6 @@ export const Menu = (props: MenuProps) => { const navigate = useNavigate(); let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined'); - const popoverRef = useRef(null); - const state = useContext(OverlayTriggerStateContext); - - // Custom click-outside handler for non-modal popovers - useEffect(() => { - if (!state?.isOpen) return; - - const handleClickOutside = (event: MouseEvent) => { - const target = event.target as Node; - - // Check if click is outside the popover - if (popoverRef.current && !popoverRef.current.contains(target)) { - // Check if click is on a trigger button or submenu - const isOnTrigger = (target as Element).closest('[data-trigger]'); - const isOnSubmenu = (target as Element).closest('[role="menu"]'); - - if (!isOnTrigger && !isOnSubmenu) { - state.close(); - } - } - }; - - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [state]); const menuContent = ( ) => { return ( {virtualized ? (