From b40bb71adf08f7452e323a920e5d08c4cf0b7653 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 28 Nov 2022 23:35:41 -0500
Subject: [PATCH] fix: Allow clicking anywhere outside command menu to close

---
 app/components/ContextMenu/MenuItem.tsx | 20 ++++++++------------
 app/editor/components/CommandMenu.tsx   | 13 +++++++++++++
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx
index dbc5bbbba..20b042b18 100644
--- a/app/components/ContextMenu/MenuItem.tsx
+++ b/app/components/ContextMenu/MenuItem.tsx
@@ -140,13 +140,11 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
     opacity: ${(props) => (props.disabled ? ".5" : 1)};
   }
 
-  ${(props) =>
-    props.disabled
-      ? "pointer-events: none;"
-      : `
+  ${(props) => props.disabled && "pointer-events: none;"}
 
-  ${
+  ${(props) =>
     props.$active === undefined &&
+    !props.disabled &&
     `
   @media (hover: hover) {
     &:hover,
@@ -162,11 +160,11 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       }
     }
   }
-  `
-  }
+  `}
 
-  ${
+  ${(props) =>
     props.$active &&
+    !props.disabled &&
     `
       color: ${props.theme.white};
       background: ${props.dangerous ? props.theme.danger : props.theme.primary};
@@ -176,16 +174,14 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       svg {
         fill: ${props.theme.white};
       }
-    `
-  }
-  `};
+    `}
 
   ${breakpoint("tablet")`
     padding: 4px 12px;
     padding-right: ${(props: MenuAnchorProps) =>
       props.disclosure ? 32 : 12}px;
     font-size: 14px;
-  `};
+  `}
 `;
 
 export const MenuAnchor = styled.a`
diff --git a/app/editor/components/CommandMenu.tsx b/app/editor/components/CommandMenu.tsx
index 6148c34d1..5abe98851 100644
--- a/app/editor/components/CommandMenu.tsx
+++ b/app/editor/components/CommandMenu.tsx
@@ -76,6 +76,7 @@ class CommandMenu<T extends MenuItem> extends React.Component<Props<T>, State> {
   };
 
   componentDidMount() {
+    window.addEventListener("mousedown", this.handleMouseDown);
     window.addEventListener("keydown", this.handleKeyDown);
   }
 
@@ -107,9 +108,21 @@ class CommandMenu<T extends MenuItem> extends React.Component<Props<T>, State> {
   }
 
   componentWillUnmount() {
+    window.removeEventListener("mousedown", this.handleMouseDown);
     window.removeEventListener("keydown", this.handleKeyDown);
   }
 
+  handleMouseDown = (event: MouseEvent) => {
+    if (
+      !this.menuRef.current ||
+      this.menuRef.current.contains(event.target as Element)
+    ) {
+      return;
+    }
+
+    this.props.onClose();
+  };
+
   handleKeyDown = (event: KeyboardEvent) => {
     if (!this.props.isActive) {
       return;