Close dropdown when clicking items

app/assets/javascripts/components/components/dropdown_menu.jsx

@@ -1,10 +1,27 @@
 import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-const DropdownMenu = ({ icon, items, size, direction }) => {
-  const directionClass = (direction == "left") ? "dropdown__left" : "dropdown__right";
+const DropdownMenu = React.createClass({
+
+  propTypes: {
+    icon: React.PropTypes.string.isRequired,
+    items: React.PropTypes.array.isRequired,
+    size: React.PropTypes.number.isRequired,
+    direction: React.PropTypes.string
+  },
+
+  mixins: [PureRenderMixin],
+
+  setRef (c) {
+    this.dropdown = c;
+  },
+
+  render () {
+    const { icon, items, size, direction } = this.props;
+    const directionClass = (direction === "left") ? "dropdown__left" : "dropdown__right";
 
     return (
-    <Dropdown>
+      <Dropdown ref={this.setRef}>
         <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}>
           <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} />
         </DropdownTrigger>
@@ -15,18 +32,15 @@ const DropdownMenu = ({ icon, items, size, direction }) => {
               if (typeof action === 'function') {
                 e.preventDefault();
                 action();
+                this.dropdown.hide();
               }
             }}>{text}</a></li>)}
           </ul>
         </DropdownContent>
       </Dropdown>
     );
-};
+  }
 
-DropdownMenu.propTypes = {
-  icon: React.PropTypes.string.isRequired,
-  items: React.PropTypes.array.isRequired,
-  size: React.PropTypes.number.isRequired
-};
+});
 
 export default DropdownMenu;