Menu: Fix menu freeze (#4632)

This commit is contained in:
Alexander Zinchuk 2024-06-12 18:10:54 +02:00
parent 7d2609c94f
commit 3c92480ffa
2 changed files with 7 additions and 3 deletions

View File

@ -14,6 +14,7 @@ import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps';
import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck'; import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
import useHistoryBack from '../../hooks/useHistoryBack'; import useHistoryBack from '../../hooks/useHistoryBack';
import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation'; import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
import useLastCallback from '../../hooks/useLastCallback';
import useShowTransition from '../../hooks/useShowTransition'; import useShowTransition from '../../hooks/useShowTransition';
import useVirtualBackdrop from '../../hooks/useVirtualBackdrop'; import useVirtualBackdrop from '../../hooks/useVirtualBackdrop';
@ -141,6 +142,11 @@ const Menu: FC<OwnProps> = ({
const transformOriginYStyle = transformOriginY !== undefined ? `${transformOriginY}px` : undefined; const transformOriginYStyle = transformOriginY !== undefined ? `${transformOriginY}px` : undefined;
const transformOriginXStyle = transformOriginX !== undefined ? `${transformOriginX}px` : undefined; const transformOriginXStyle = transformOriginX !== undefined ? `${transformOriginX}px` : undefined;
const handleClick = useLastCallback((e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
if (autoClose) { onClose(); }
});
const menu = ( const menu = (
<div <div
id={id} id={id}
@ -174,7 +180,7 @@ const Menu: FC<OwnProps> = ({
`transform-origin: ${transformOriginXStyle || positionX} ${transformOriginYStyle || positionY}`, `transform-origin: ${transformOriginXStyle || positionX} ${transformOriginYStyle || positionY}`,
bubbleStyle, bubbleStyle,
)} )}
onClick={autoClose ? onClose : undefined} onClick={handleClick}
> >
{children} {children}
{footer && <div className="footer">{footer}</div>} {footer && <div className="footer">{footer}</div>}

View File

@ -52,7 +52,6 @@ const MenuItem: FC<MenuItemProps> = (props) => {
const lang = useLang(); const lang = useLang();
const { isTouchScreen } = useAppLayout(); const { isTouchScreen } = useAppLayout();
const handleClick = useLastCallback((e: React.MouseEvent<HTMLDivElement>) => { const handleClick = useLastCallback((e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
if (disabled || !onClick) { if (disabled || !onClick) {
e.preventDefault(); e.preventDefault();
return; return;
@ -65,7 +64,6 @@ const MenuItem: FC<MenuItemProps> = (props) => {
return; return;
} }
e.stopPropagation();
if (disabled || !onClick) { if (disabled || !onClick) {
e.preventDefault(); e.preventDefault();