From 6fe1ed3797c90581f886965452493cf8c6ce26ed Mon Sep 17 00:00:00 2001
From: ramfox <kasey@qri.io>
Date: Mon, 9 Sep 2019 12:33:37 -0400
Subject: [PATCH] fix(HeaderColumnButtonDropdown): when user clicks away, close
 menu

---
 .../chrome/HeaderColumnButtonDropdown.tsx     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/app/components/chrome/HeaderColumnButtonDropdown.tsx b/app/components/chrome/HeaderColumnButtonDropdown.tsx
index ab08f88a..fc61eccd 100644
--- a/app/components/chrome/HeaderColumnButtonDropdown.tsx
+++ b/app/components/chrome/HeaderColumnButtonDropdown.tsx
@@ -12,10 +12,30 @@ const HeaderColumnButtonDropdown: React.FunctionComponent<HeaderColumnButtonDrop
     setShowMenu(!showMenu)
     event.stopPropagation()
   }
+  const dropdown: any = React.useRef(null)
+
+  const handleClick = (e: MouseEvent) => {
+    if (dropdown.current.contains(e.target)) {
+      // inside click
+      return
+    }
+    // outside click
+    setShowMenu(false)
+  }
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', (e) => handleClick(e))
+
+    return () => {
+      document.removeEventListener('mousedown', (e) => handleClick(e))
+    }
+  })
+
   const { icon, label = '', tooltip, onClick = toggleMenu, items } = props
 
   return (
     <div
+      ref={dropdown}
       className='header-column header-column-dropdown'
       data-tip={tooltip}
       onClick={onClick}