From 354f53f50cfcb58d1949bdb33e882dd72b38eae9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ernesto=20Garc=C3=ADa?= <ernesto@doist.com>
Date: Thu, 7 Mar 2024 09:52:14 -0300
Subject: [PATCH] Hide menus when they lose focus

---
 CHANGELOG.md      | 1 +
 src/menu/menu.tsx | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23f318d28..d56acde6e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ Reactist follows [semantic versioning](https://semver.org/) and doesn't introduc
 # v24.1.1-beta
 
 -   [Fix] It was possible to leave a tooltip in a state in which it remained visible all the time. This release fixes the issue.
+-   [Fix] Auto-close menus when they lose focus to elements other than their own content or their sub-menus.
 
 # v24.1.0-beta
 
diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx
index 2609ae986..ca964c846 100644
--- a/src/menu/menu.tsx
+++ b/src/menu/menu.tsx
@@ -156,6 +156,12 @@ const MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(
                 className={classNames('reactist_menulist', exceptionallySetClassName)}
                 getAnchorRect={getAnchorRect ?? undefined}
                 modal={modal}
+                onBlur={(event) => {
+                    if (!event.relatedTarget) return
+                    if (event.currentTarget.contains(event.relatedTarget)) return
+                    if (event.relatedTarget?.closest('[role^="menu"]')) return
+                    menuStore.hide()
+                }}
             />
         </Portal>
     ) : null