fix(Dropdown): Fix Dropdown should when user clicks outside of it

Creates a new ClickOutside helper component and uses it in Dropdown and NavItem

Fixes #165

Author: jonthomp

src/components/Dropdown/Dropdown.react.js

@@ -7,6 +7,8 @@ import DropdownMenu from "./DropdownMenu.react";
 import DropdownItem from "./DropdownItem.react";
 import DropdownItemDivider from "./DropdownItemDivider.react";
 
+import ClickOutside from "../../helpers/ClickOutside.react";
+
 import { Manager } from "react-popper";
 
 import type { Placement } from "react-popper";
@@ -245,10 +247,14 @@ class Dropdown extends React.Component<Props, State> {
 
     return (
       <Manager>
-        <div className={classes}>
-          {trigger}
-          {menu || children}
-        </div>
+        <ClickOutside onOutsideClick={() => this.setState({ isOpen: false })}>
+          {({ setElementRef }) => (
+            <div className={classes} ref={setElementRef}>
+              {trigger}
+              {menu || children}
+            </div>
+          )}
+        </ClickOutside>
       </Manager>
     );
   }

src/components/Nav/NavItem.react.js

@@ -4,6 +4,7 @@ import cn from "classnames";
 import Nav from "../Nav";
 import Dropdown from "../Dropdown";
 import type { subNavItem } from "./Nav.react";
+import ClickOutside from "../../helpers/ClickOutside.react";
 
 import { Manager, Reference } from "react-popper";
 import type { Placement, ReferenceChildrenProps } from "react-popper";
@@ -132,13 +133,29 @@ class NavItem extends React.PureComponent<Props, State> {
 
     const wrappedChildren =
       type === "div" ? (
-        <div className={wrapperClasses} onClick={this._handleOnClick}>
-          {childrenForAll}
-        </div>
+        <ClickOutside onOutsideClick={() => this.setState({ isOpen: false })}>
+          {({ setElementRef }) => (
+            <div
+              className={wrapperClasses}
+              onClick={this._handleOnClick}
+              ref={setElementRef}
+            >
+              {childrenForAll}
+            </div>
+          )}
+        </ClickOutside>
       ) : (
-        <li className={wrapperClasses} onClick={this._handleOnClick}>
-          {childrenForAll}
-        </li>
+        <ClickOutside onOutsideClick={() => this.setState({ isOpen: false })}>
+          {({ setElementRef }) => (
+            <li
+              className={wrapperClasses}
+              onClick={this._handleOnClick}
+              ref={setElementRef}
+            >
+              {childrenForAll}
+            </li>
+          )}
+        </ClickOutside>
       );
 
     return hasSubNav ? <Manager>{wrappedChildren}</Manager> : wrappedChildren;

src/helpers/ClickOutside.react.js

@@ -0,0 +1,44 @@
+// @flow
+
+import * as React from "react";
+
+type Props = {|
+  +children: ({| +setElementRef: (el: ?HTMLElement) => mixed |}) => React.Node,
+  +onOutsideClick: () => void,
+|};
+
+/**
+ * A helper to help you do something when a user clicks outside of a component
+ */
+class ClickOutside extends React.PureComponent<Props, void> {
+  elementRef: ?HTMLElement;
+
+  componentDidMount = () => {
+    document.addEventListener("mousedown", this.handleOutsideOnClick, false);
+  };
+
+  componentWillUnmount = () => {
+    document.removeEventListener("mousedown", this.handleOutsideOnClick, false);
+  };
+
+  setElementRef = (el: ?HTMLElement): mixed => {
+    if (el) this.elementRef = el;
+  };
+
+  isOutsideClick = (target: mixed) =>
+    this.elementRef &&
+    target instanceof Node &&
+    !this.elementRef.contains(target);
+
+  handleOutsideOnClick: MouseEventListener = ({ target }) => {
+    if (this.isOutsideClick(target)) this.props.onOutsideClick();
+    return;
+  };
+
+  render() {
+    const { children } = this.props;
+    return children({ setElementRef: this.setElementRef });
+  }
+}
+
+export default ClickOutside;