Add click outside

components/dropdown.js

@@ -1,7 +1,8 @@
 import React from 'react'
+import enhanceWithClickOutside from 'react-click-outside'
 import ArrowDown from './arrowdown'
 
-export default class extends React.Component {
+class Dropdown extends React.Component {
   constructor(props) {
     super()
     this.state = {
@@ -20,6 +21,10 @@ export default class extends React.Component {
     this.setState({ listVisible: !this.state.listVisible })
   }
 
+  handleClickOutside() {
+    this.setState({ listVisible: false });
+  }
+
   renderListItems() {
     return this.props.list.map((item, i) => (
       <div className={`dropdown-list-item ${this.state.selected === item ? "selected" : ""}`} key={i} onClick={this.select.bind(null, item)}>
@@ -118,3 +123,5 @@ export default class extends React.Component {
     )
   }
 }
+
+export default enhanceWithClickOutside(Dropdown)

package.json

@@ -17,6 +17,7 @@
     "morgan": "^1.8.2",
     "next": "^2.4.3",
     "react": "^15.5.4",
+    "react-click-outside": "^2.3.1",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
     "react-dom": "^15.5.4"