fix(HeaderColumnButtonDropdown): when user clicks away, close menu

qri-io · Sep 10, 2019 · 6fe1ed3 · 6fe1ed3
1 parent fae0bd7
commit 6fe1ed3
Showing 1 changed file with 20 additions and 0 deletions.
diff --git 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}