Hide menus when they lose focus

Doist · Mar 7, 2024 · 354f53f · 354f53f
1 parent cca366b
commit 354f53f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git 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
@@ -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