diff --git a/src/common/Menu/MenuProvider.tsx b/src/common/Menu/MenuProvider.tsx
index dba333e31..8955c4fad 100644
--- a/src/common/Menu/MenuProvider.tsx
+++ b/src/common/Menu/MenuProvider.tsx
@@ -4,6 +4,7 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import useKeyboardEvent from '../useKeyboardEvent';
+import useOnClickOutside from '../useOnClickOutside';
 import MenuContext from './MenuContext';
 import { type Menu } from './types';
 
@@ -70,6 +71,7 @@ const MenuProvider = ({ children, className }: Props) => {
     }, [active]);
 
     useKeyboardEvent('Escape', closeAll);
+    useOnClickOutside([container.current, active?.parent], closeAll);
 
     return (
         <MenuContext.Provider value={{ active, create, remove, render, toggle }}>
diff --git a/src/common/useOnClickOutside.tsx b/src/common/useOnClickOutside.tsx
index be37dcd8f..f9e485efc 100644
--- a/src/common/useOnClickOutside.tsx
+++ b/src/common/useOnClickOutside.tsx
@@ -2,17 +2,17 @@
 
 import { useEffect } from 'react';
 
-const useOnClickOutside = (ref: React.MutableRefObject<HTMLElement>, handler: () => void, ignore?: boolean) => {
+const useOnClickOutside = (elements: HTMLElement[], handler: () => void) => {
     useEffect(() => {
         const onClickOutside = (event: MouseEvent) => {
             const element = event.target as Node;
-            if (ref.current && !ref.current.contains(element)) {
-                !ignore && handler();
+            if (!elements.some((el) => el && el.contains(element))) {
+                handler();
             }
         };
 
-        document.addEventListener('mouseup', onClickOutside);
-        return () => document.removeEventListener('mouseup', onClickOutside);
+        document.addEventListener('click', onClickOutside);
+        return () => document.removeEventListener('click', onClickOutside);
     }, [handler]);
 };