From 3c92480ffafa42a2bfd328258f575b4301192ebe Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 12 Jun 2024 18:10:54 +0200
Subject: [PATCH] Menu: Fix menu freeze (#4632)

---
 src/components/ui/Menu.tsx     | 8 +++++++-
 src/components/ui/MenuItem.tsx | 2 --
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx
index 05fbaefae..41d1e7e85 100644
--- a/src/components/ui/Menu.tsx
+++ b/src/components/ui/Menu.tsx
@@ -14,6 +14,7 @@ import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps';
 import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
 import useHistoryBack from '../../hooks/useHistoryBack';
 import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
+import useLastCallback from '../../hooks/useLastCallback';
 import useShowTransition from '../../hooks/useShowTransition';
 import useVirtualBackdrop from '../../hooks/useVirtualBackdrop';
 
@@ -141,6 +142,11 @@ const Menu: FC<OwnProps> = ({
   const transformOriginYStyle = transformOriginY !== undefined ? `${transformOriginY}px` : undefined;
   const transformOriginXStyle = transformOriginX !== undefined ? `${transformOriginX}px` : undefined;
 
+  const handleClick = useLastCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    if (autoClose) { onClose(); }
+  });
+
   const menu = (
     <div
       id={id}
@@ -174,7 +180,7 @@ const Menu: FC<OwnProps> = ({
           `transform-origin: ${transformOriginXStyle || positionX} ${transformOriginYStyle || positionY}`,
           bubbleStyle,
         )}
-        onClick={autoClose ? onClose : undefined}
+        onClick={handleClick}
       >
         {children}
         {footer && <div className="footer">{footer}</div>}
diff --git a/src/components/ui/MenuItem.tsx b/src/components/ui/MenuItem.tsx
index b2882f13a..98ea73231 100644
--- a/src/components/ui/MenuItem.tsx
+++ b/src/components/ui/MenuItem.tsx
@@ -52,7 +52,6 @@ const MenuItem: FC<MenuItemProps> = (props) => {
   const lang = useLang();
   const { isTouchScreen } = useAppLayout();
   const handleClick = useLastCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
     if (disabled || !onClick) {
       e.preventDefault();
       return;
@@ -65,7 +64,6 @@ const MenuItem: FC<MenuItemProps> = (props) => {
       return;
     }
 
-    e.stopPropagation();
     if (disabled || !onClick) {
       e.preventDefault();