diff --git a/packages/core/src/components/MenuButton/MenuButton.tsx b/packages/core/src/components/MenuButton/MenuButton.tsx index 2e04d38460..f8461b7c07 100644 --- a/packages/core/src/components/MenuButton/MenuButton.tsx +++ b/packages/core/src/components/MenuButton/MenuButton.tsx @@ -78,7 +78,7 @@ export interface MenuButtonProps extends VibeComponentProps { */ onMenuShow?: () => void; /* - Callback function to be called when the menu is shown + Callback function to be called when the menu is hidden */ onMenuHide?: () => void; /** @@ -191,35 +191,36 @@ const MenuButton: VibeComponent & { const [isOpen, setIsOpen] = useState(open); const isActive = active ?? isOpen; - const onMenuDidClose = useCallback( - (event: React.KeyboardEvent) => { - const isEscapeClicked = event && event.key === "Escape"; - if (closeMenuOnItemClick || isEscapeClicked) { - setIsOpen(false); + const handleMenuClose = useCallback( + (focusOnMenuButtonAfterClose: boolean) => { + onMenuHide(); + setIsOpen(false); + const button = componentRef.current; + if (!button || !focusOnMenuButtonAfterClose) { + return; } + window.requestAnimationFrame(() => { + button.focus(); + }); + }, + [onMenuHide] + ); - if (isEscapeClicked) { - const button = componentRef.current; - window.requestAnimationFrame(() => { - button.focus(); - }); + const onMenuDidClose = useCallback( + (event: React.KeyboardEvent) => { + const isEscapeKey = event?.key === "Escape"; + if (isEscapeKey || closeMenuOnItemClick) { + handleMenuClose(isEscapeKey); } }, - [closeMenuOnItemClick] + [closeMenuOnItemClick, handleMenuClose] ); const onDialogDidHide = useCallback( (event: DialogEvent, hideEvent: string) => { - setIsOpen(false); - onMenuHide(); - const button = componentRef.current; - window.requestAnimationFrame(() => { - if (button && hideEvent === Dialog.hideShowTriggers.ESCAPE_KEY) { - button.focus(); - } - }); + handleMenuClose(hideEvent === Dialog.hideShowTriggers.ESCAPE_KEY); }, - [setIsOpen, onMenuHide, componentRef] + [handleMenuClose] ); const onDialogDidShow = useCallback(() => {