From 0dddb878c8631c6de7e56b22ca40b8fedba2edca Mon Sep 17 00:00:00 2001
From: Angel Gomez Salazar <agomezs@fb.com>
Date: Tue, 14 Feb 2017 19:38:47 -0800
Subject: [PATCH 01/11] Change menu and select behavior to what is expected

---
 css/app.css                     |  6 ---
 src/components/GraphiQL.js      | 10 ++++
 src/components/ToolbarMenu.js   | 64 ++++++++++++++++++------
 src/components/ToolbarSelect.js | 89 +++++++++++++++++++++------------
 4 files changed, 115 insertions(+), 54 deletions(-)

diff --git a/css/app.css b/css/app.css
index 8b1382bf4ee..2132d5fcd06 100644
--- a/css/app.css
+++ b/css/app.css
@@ -331,12 +331,6 @@
   left: 0;
   min-width: 100%;
   top: -5px;
-  visibility: hidden;
-}
-
-.graphiql-container .toolbar-menu:active .toolbar-menu-items,
-.graphiql-container .toolbar-select:active .toolbar-select-options {
-  visibility: visible;
 }
 
 .graphiql-container .execute-options > li,
diff --git a/src/components/GraphiQL.js b/src/components/GraphiQL.js
index 20c834575c9..660bdeea6dd 100644
--- a/src/components/GraphiQL.js
+++ b/src/components/GraphiQL.js
@@ -227,6 +227,16 @@ export class GraphiQL extends React.Component {
           title="Prettify Query"
           label="Prettify"
         />
+        <ToolbarSelect label="Test Select">
+          <ToolbarSelectOption label="Option 1" />
+          <ToolbarSelectOption label="Option 2" />
+          <ToolbarSelectOption label="Option 3" />
+        </ToolbarSelect>
+        <ToolbarMenu label="Test Select">
+          <ToolbarMenuItem label="Option 1" />
+          <ToolbarMenuItem label="Option 2" />
+          <ToolbarMenuItem label="Option 3" />
+        </ToolbarMenu>
       </GraphiQL.Toolbar>;
 
     const footer = find(children, child => child.type === GraphiQL.Footer);
diff --git a/src/components/ToolbarMenu.js b/src/components/ToolbarMenu.js
index a25f95e3b69..3086f649411 100644
--- a/src/components/ToolbarMenu.js
+++ b/src/components/ToolbarMenu.js
@@ -14,22 +14,54 @@ import React, { PropTypes } from 'react';
  *
  * A menu style button to use within the Toolbar.
  */
-export function ToolbarMenu({ title, label, children }) {
-  return (
-    <a
-      className="toolbar-menu toolbar-button"
-      onMouseDown={preventDefault}
-      title={title}>
-      {label}
-      <svg width="14" height="8">
-        <path fill="#666" d="M 5 1.5 L 14 1.5 L 9.5 7 z" />
-      </svg>
-      <ul className="toolbar-menu-items">
-        {children}
-      </ul>
-    </a>
-  );
-}
+ export class ToolbarMenu extends React.Component {
+   static propTypes = {
+     title: PropTypes.string,
+     label: PropTypes.string,
+   }
+
+   constructor(props) {
+     super(props);
+     this.state = { visibility: 'hidden' };
+   }
+
+   render() {
+     const ulStyle = {
+       visibility: this.state.visibility
+     }
+     return (
+       <a
+         className="toolbar-menu toolbar-button"
+         onClick={this.handleOpen.bind(this)}
+         onMouseDown={preventDefault}
+         ref={() => {
+           document.addEventListener('click', this.handleClick.bind(this), false);
+         }}
+         title={this.props.title}>
+         {this.props.label}
+         <svg width="14" height="8">
+           <path fill="#666" d="M 5 1.5 L 14 1.5 L 9.5 7 z" />
+         </svg>
+         <ul className="toolbar-menu-items" style={ulStyle}>
+           {this.props.children}
+         </ul>
+       </a>
+     );
+   }
+
+   handleClick(e) {
+     if (ReactDOM.findDOMNode(this) !== e.target) {
+       e.preventDefault();
+       this.setState({ visibility: 'hidden' });
+     }
+   }
+
+   handleOpen = e => {
+     e.preventDefault();
+     this.setState({ visibility: 'visible' });
+   };
+
+ }
 
 ToolbarMenu.propTypes = {
   title: PropTypes.string,
diff --git a/src/components/ToolbarSelect.js b/src/components/ToolbarSelect.js
index 7e935cd0012..8fed68883fd 100644
--- a/src/components/ToolbarSelect.js
+++ b/src/components/ToolbarSelect.js
@@ -14,42 +14,67 @@ import React, { PropTypes } from 'react';
  *
  * A select-option style button to use within the Toolbar.
  *
- * Note that, like React's <select>, this component is stateless and expects you
- * to re-render with a new selected={} condition on the child options.
  */
-export function ToolbarSelect({ onSelect, title, children }) {
-  let selectedChild;
-  const optionChildren = React.Children.map(children, (child, i) => {
-    if (!selectedChild || child.props.selected) {
-      selectedChild = child;
-    }
-    const onChildSelect =
+
+export class ToolbarSelect extends React.Component {
+  static propTypes = {
+    title: PropTypes.string,
+    label: PropTypes.string,
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = { visibility: 'hidden' };
+  }
+
+  render() {
+    let selectedChild;
+    const optionChildren = React.Children.map(this.props.children, (child, i) => {
+      if (!selectedChild || child.props.selected) {
+        selectedChild = child;
+      }
+      const onChildSelect =
       child.props.onSelect ||
-      onSelect && onSelect.bind(null, child.props.value, i);
-    return <ToolbarSelectOption {...child.props} onSelect={onChildSelect} />;
-  });
+      this.props.onSelect && this.props.onSelect.bind(null, child.props.value, i);
+      return <ToolbarSelectOption {...child.props} onSelect={onChildSelect} />;
+    });
+    const ulStyle = {
+      visibility: this.state.visibility
+    }
+    return (
+      <a
+        className="toolbar-select toolbar-button"
+        onClick={this.handleOpen.bind(this)}
+        onMouseDown={preventDefault}
+        ref={() => {
+          document.addEventListener('click', this.handleClick.bind(this), false);
+        }}
+        title={this.props.title}>
+        {selectedChild.props.label}
+        <svg width="13" height="10">
+          <path fill="#666" d="M 5 5 L 13 5 L 9 1 z" />
+          <path fill="#666" d="M 5 6 L 13 6 L 9 10 z" />
+        </svg>
+        <ul className="toolbar-select-options" style={ulStyle}>
+          {optionChildren}
+        </ul>
+      </a>
+    );
+  }
 
-  return (
-    <a
-      className="toolbar-select toolbar-button"
-      onMouseDown={preventDefault}
-      title={title}>
-      {selectedChild.props.label}
-      <svg width="13" height="10">
-        <path fill="#666" d="M 5 5 L 13 5 L 9 1 z" />
-        <path fill="#666" d="M 5 6 L 13 6 L 9 10 z" />
-      </svg>
-      <ul className="toolbar-select-options">
-        {optionChildren}
-      </ul>
-    </a>
-  );
-}
+  handleClick(e) {
+    if (ReactDOM.findDOMNode(this) !== e.target) {
+      e.preventDefault();
+      this.setState({ visibility: 'hidden' });
+    }
+  }
 
-ToolbarSelect.propTypes = {
-  onSelect: PropTypes.func,
-  title: PropTypes.string,
-};
+  handleOpen = e => {
+    e.preventDefault();
+    this.setState({ visibility: 'visible' });
+  };
+
+}
 
 export function ToolbarSelectOption({ onSelect, label, selected }) {
   return (

From ee5955e540a7f6118d4e520a2138d4dfd64bb28a Mon Sep 17 00:00:00 2001
From: Angel Gomez Salazar <agomezs@fb.com>
Date: Tue, 14 Feb 2017 20:21:10 -0800
Subject: [PATCH 02/11] Remove test elements from graphiql toolbar

---
 src/components/GraphiQL.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/components/GraphiQL.js b/src/components/GraphiQL.js
index 660bdeea6dd..20c834575c9 100644
--- a/src/components/GraphiQL.js
+++ b/src/components/GraphiQL.js
@@ -227,16 +227,6 @@ export class GraphiQL extends React.Component {
           title="Prettify Query"
           label="Prettify"
         />
-        <ToolbarSelect label="Test Select">
-          <ToolbarSelectOption label="Option 1" />
-          <ToolbarSelectOption label="Option 2" />
-          <ToolbarSelectOption label="Option 3" />
-        </ToolbarSelect>
-        <ToolbarMenu label="Test Select">
-          <ToolbarMenuItem label="Option 1" />
-          <ToolbarMenuItem label="Option 2" />
-          <ToolbarMenuItem label="Option 3" />
-        </ToolbarMenu>
       </GraphiQL.Toolbar>;
 
     const footer = find(children, child => child.type === GraphiQL.Footer);

From 06eb6e14aa2e9a2f9af9dbb3c69ac2a5131f1412 Mon Sep 17 00:00:00 2001
From: Angel Gomez Salazar <agomezs@fb.com>
Date: Tue, 14 Feb 2017 20:27:48 -0800
Subject: [PATCH 03/11] Get rid of leftover unused variables in menu

---
 src/components/ToolbarMenu.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/ToolbarMenu.js b/src/components/ToolbarMenu.js
index 3086f649411..72bed58b58c 100644
--- a/src/components/ToolbarMenu.js
+++ b/src/components/ToolbarMenu.js
@@ -63,11 +63,6 @@ import React, { PropTypes } from 'react';
 
  }
 
-ToolbarMenu.propTypes = {
-  title: PropTypes.string,
-  label: PropTypes.string,
-};
-
 export function ToolbarMenuItem({ onSelect, title, label }) {
   return (
     <li

From 9957e8a14a2fc9bab1c5e4d2352d621886a69b52 Mon Sep 17 00:00:00 2001
From: Angel Gomez Salazar <agomezs@fb.com>
Date: Tue, 14 Feb 2017 21:16:53 -0800
Subject: [PATCH 04/11] Make eslint happy

---
 src/components/ToolbarMenu.js   | 91 +++++++++++++++++----------------
 src/components/ToolbarSelect.js | 16 ++++--
 2 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/src/components/ToolbarMenu.js b/src/components/ToolbarMenu.js
index 72bed58b58c..8c6941d3a52 100644
--- a/src/components/ToolbarMenu.js
+++ b/src/components/ToolbarMenu.js
@@ -14,54 +14,57 @@ import React, { PropTypes } from 'react';
  *
  * A menu style button to use within the Toolbar.
  */
- export class ToolbarMenu extends React.Component {
-   static propTypes = {
-     title: PropTypes.string,
-     label: PropTypes.string,
-   }
+export class ToolbarMenu extends React.Component {
+  static propTypes = {
+    title: PropTypes.string,
+    label: PropTypes.string,
+  }
 
-   constructor(props) {
-     super(props);
-     this.state = { visibility: 'hidden' };
-   }
+  constructor(props) {
+    super(props);
+    this.state = { visibility: 'hidden' };
+  }
 
-   render() {
-     const ulStyle = {
-       visibility: this.state.visibility
-     }
-     return (
-       <a
-         className="toolbar-menu toolbar-button"
-         onClick={this.handleOpen.bind(this)}
-         onMouseDown={preventDefault}
-         ref={() => {
-           document.addEventListener('click', this.handleClick.bind(this), false);
-         }}
-         title={this.props.title}>
-         {this.props.label}
-         <svg width="14" height="8">
-           <path fill="#666" d="M 5 1.5 L 14 1.5 L 9.5 7 z" />
-         </svg>
-         <ul className="toolbar-menu-items" style={ulStyle}>
-           {this.props.children}
-         </ul>
-       </a>
-     );
-   }
+  render() {
+    const ulStyle = {
+      visibility: this.state.visibility
+    };
+    return (
+      <a
+        className="toolbar-menu toolbar-button"
+        onClick={this.handleOpen.bind(this)}
+        onMouseDown={preventDefault}
+        ref={() => {
+          document.addEventListener('click',
+            this.handleClick.bind(this),
+            false
+          );
+        }}
+        title={this.props.title}>
+        {this.props.label}
+        <svg width="14" height="8">
+          <path fill="#666" d="M 5 1.5 L 14 1.5 L 9.5 7 z" />
+        </svg>
+        <ul className="toolbar-menu-items" style={ulStyle}>
+          {this.props.children}
+        </ul>
+      </a>
+    );
+  }
 
-   handleClick(e) {
-     if (ReactDOM.findDOMNode(this) !== e.target) {
-       e.preventDefault();
-       this.setState({ visibility: 'hidden' });
-     }
-   }
+  handleClick(e) {
+    // eslint-disable-next-line no-undef
+    if (ReactDOM.findDOMNode(this) !== e.target) {
+      e.preventDefault();
+      this.setState({ visibility: 'hidden' });
+    }
+  }
 
-   handleOpen = e => {
-     e.preventDefault();
-     this.setState({ visibility: 'visible' });
-   };
-
- }
+  handleOpen = e => {
+    e.preventDefault();
+    this.setState({ visibility: 'visible' });
+  };
+}
 
 export function ToolbarMenuItem({ onSelect, title, label }) {
   return (
diff --git a/src/components/ToolbarSelect.js b/src/components/ToolbarSelect.js
index 8fed68883fd..69cba505638 100644
--- a/src/components/ToolbarSelect.js
+++ b/src/components/ToolbarSelect.js
@@ -20,6 +20,7 @@ export class ToolbarSelect extends React.Component {
   static propTypes = {
     title: PropTypes.string,
     label: PropTypes.string,
+    onSelect: PropTypes.func
   }
 
   constructor(props) {
@@ -29,25 +30,31 @@ export class ToolbarSelect extends React.Component {
 
   render() {
     let selectedChild;
-    const optionChildren = React.Children.map(this.props.children, (child, i) => {
+    const optionChildren = React.Children.map(this.props.children,
+    (child, i) => {
       if (!selectedChild || child.props.selected) {
         selectedChild = child;
       }
       const onChildSelect =
       child.props.onSelect ||
-      this.props.onSelect && this.props.onSelect.bind(null, child.props.value, i);
+      this.props.onSelect && this.props.onSelect.bind(null,
+        child.props.value,
+        i
+      );
       return <ToolbarSelectOption {...child.props} onSelect={onChildSelect} />;
     });
     const ulStyle = {
       visibility: this.state.visibility
-    }
+    };
     return (
       <a
         className="toolbar-select toolbar-button"
         onClick={this.handleOpen.bind(this)}
         onMouseDown={preventDefault}
         ref={() => {
-          document.addEventListener('click', this.handleClick.bind(this), false);
+          document.addEventListener('click',
+          this.handleClick.bind(this),
+          false);
         }}
         title={this.props.title}>
         {selectedChild.props.label}
@@ -63,6 +70,7 @@ export class ToolbarSelect extends React.Component {
   }
 
   handleClick(e) {
+    // eslint-disable-next-line no-undef
     if (ReactDOM.findDOMNode(this) !== e.target) {
       e.preventDefault();
       this.setState({ visibility: 'hidden' });

From 2d559c004e86cf32c16d885f7955190feb1a3df2 Mon Sep 17 00:00:00 2001
From: "angel.gomez" <agomezs@fb.com>
Date: Tue, 14 Feb 2017 22:12:30 -0800
Subject: [PATCH 05/11] Use exposed node via ref instead of ReactDOM

---
 src/components/GraphiQL.js      |  6 ++++++
 src/components/ToolbarMenu.js   | 11 +++--------
 src/components/ToolbarSelect.js | 10 +++-------
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/GraphiQL.js b/src/components/GraphiQL.js
index 20c834575c9..9efe271113f 100644
--- a/src/components/GraphiQL.js
+++ b/src/components/GraphiQL.js
@@ -227,6 +227,12 @@ export class GraphiQL extends React.Component {
           title="Prettify Query"
           label="Prettify"
         />
+        <ToolbarSelect label='Select'>
+          <ToolbarSelectOption label='Option 1' />
+        </ToolbarSelect>
+        <ToolbarMenu label='Menu'>
+          <ToolbarMenuItem label='Item 1' />
+        </ToolbarMenu>
       </GraphiQL.Toolbar>;
 
     const footer = find(children, child => child.type === GraphiQL.Footer);
diff --git a/src/components/ToolbarMenu.js b/src/components/ToolbarMenu.js
index 8c6941d3a52..087d51ad053 100644
--- a/src/components/ToolbarMenu.js
+++ b/src/components/ToolbarMenu.js
@@ -34,12 +34,7 @@ export class ToolbarMenu extends React.Component {
         className="toolbar-menu toolbar-button"
         onClick={this.handleOpen.bind(this)}
         onMouseDown={preventDefault}
-        ref={() => {
-          document.addEventListener('click',
-            this.handleClick.bind(this),
-            false
-          );
-        }}
+        ref={node => {this._node = node;}}
         title={this.props.title}>
         {this.props.label}
         <svg width="14" height="8">
@@ -53,8 +48,7 @@ export class ToolbarMenu extends React.Component {
   }
 
   handleClick(e) {
-    // eslint-disable-next-line no-undef
-    if (ReactDOM.findDOMNode(this) !== e.target) {
+    if (this._node !== e.target) {
       e.preventDefault();
       this.setState({ visibility: 'hidden' });
     }
@@ -63,6 +57,7 @@ export class ToolbarMenu extends React.Component {
   handleOpen = e => {
     e.preventDefault();
     this.setState({ visibility: 'visible' });
+    document.addEventListener('click', this.handleClick.bind(this));
   };
 }
 
diff --git a/src/components/ToolbarSelect.js b/src/components/ToolbarSelect.js
index 69cba505638..afacc5dd80a 100644
--- a/src/components/ToolbarSelect.js
+++ b/src/components/ToolbarSelect.js
@@ -51,11 +51,7 @@ export class ToolbarSelect extends React.Component {
         className="toolbar-select toolbar-button"
         onClick={this.handleOpen.bind(this)}
         onMouseDown={preventDefault}
-        ref={() => {
-          document.addEventListener('click',
-          this.handleClick.bind(this),
-          false);
-        }}
+        ref={node => {this._node = node;}}
         title={this.props.title}>
         {selectedChild.props.label}
         <svg width="13" height="10">
@@ -70,8 +66,7 @@ export class ToolbarSelect extends React.Component {
   }
 
   handleClick(e) {
-    // eslint-disable-next-line no-undef
-    if (ReactDOM.findDOMNode(this) !== e.target) {
+    if (this._node !== e.target) {
       e.preventDefault();
       this.setState({ visibility: 'hidden' });
     }
@@ -80,6 +75,7 @@ export class ToolbarSelect extends React.Component {
   handleOpen = e => {
     e.preventDefault();
     this.setState({ visibility: 'visible' });
+    document.addEventListener('click', this.handleClick.bind(this));
   };
 
 }

From 4e05ef055a4e71862bc86b69ba976dc043561594 Mon Sep 17 00:00:00 2001
From: "angel.gomez" <agomezs@fb.com>
Date: Tue, 14 Feb 2017 22:14:51 -0800
Subject: [PATCH 06/11] Remove test elements again

---
 src/components/GraphiQL.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/GraphiQL.js b/src/components/GraphiQL.js
index 9efe271113f..20c834575c9 100644
--- a/src/components/GraphiQL.js
+++ b/src/components/GraphiQL.js
@@ -227,12 +227,6 @@ export class GraphiQL extends React.Component {
           title="Prettify Query"
           label="Prettify"
         />
-        <ToolbarSelect label='Select'>
-          <ToolbarSelectOption label='Option 1' />
-        </ToolbarSelect>
-        <ToolbarMenu label='Menu'>
-          <ToolbarMenuItem label='Item 1' />
-        </ToolbarMenu>
       </GraphiQL.Toolbar>;
 
     const footer = find(children, child => child.type === GraphiQL.Footer);

From e5725918804c2edeef6878fb0c8a75ef8fbe9859 Mon Sep 17 00:00:00 2001
From: Angel Gomez Salazar <agomezs@fb.com>
Date: Wed, 15 Feb 2017 15:31:36 -0800
Subject: [PATCH 07/11] Using classname instead of style, removing orphan
 evenListeners

---
 css/app.css                     |  9 +++++++++
 src/components/ToolbarMenu.js   | 13 ++++++-------
 src/components/ToolbarSelect.js | 19 +++++++++----------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/css/app.css b/css/app.css
index 2132d5fcd06..89c81ca2199 100644
--- a/css/app.css
+++ b/css/app.css
@@ -327,10 +327,19 @@
   visibility: hidden;
 }
 
+.graphiql-container .toolbar-menu-items.open {
+  visibility: visible;
+}
+
 .graphiql-container .toolbar-select-options {
   left: 0;
   min-width: 100%;
   top: -5px;
+  visibility: hidden;
+}
+
+.graphiql-container .toolbar-select-options.open {
+  visibility: visible;
 }
 
 .graphiql-container .execute-options > li,
diff --git a/src/components/ToolbarMenu.js b/src/components/ToolbarMenu.js
index 087d51ad053..7491322b9f1 100644
--- a/src/components/ToolbarMenu.js
+++ b/src/components/ToolbarMenu.js
@@ -22,13 +22,11 @@ export class ToolbarMenu extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { visibility: 'hidden' };
+    this.state = { visible: false };
   }
 
   render() {
-    const ulStyle = {
-      visibility: this.state.visibility
-    };
+    const visible = this.state.visible;
     return (
       <a
         className="toolbar-menu toolbar-button"
@@ -40,7 +38,7 @@ export class ToolbarMenu extends React.Component {
         <svg width="14" height="8">
           <path fill="#666" d="M 5 1.5 L 14 1.5 L 9.5 7 z" />
         </svg>
-        <ul className="toolbar-menu-items" style={ulStyle}>
+        <ul className={'toolbar-menu-items' + (visible ? ' open' : '')}>
           {this.props.children}
         </ul>
       </a>
@@ -50,13 +48,14 @@ export class ToolbarMenu extends React.Component {
   handleClick(e) {
     if (this._node !== e.target) {
       e.preventDefault();
-      this.setState({ visibility: 'hidden' });
+      this.setState({ visible: false });
+      document.removeEventListener('click', this.handleClick.bind(this));
     }
   }
 
   handleOpen = e => {
     e.preventDefault();
-    this.setState({ visibility: 'visible' });
+    this.setState({ visible: true });
     document.addEventListener('click', this.handleClick.bind(this));
   };
 }
diff --git a/src/components/ToolbarSelect.js b/src/components/ToolbarSelect.js
index afacc5dd80a..169e9b3f553 100644
--- a/src/components/ToolbarSelect.js
+++ b/src/components/ToolbarSelect.js
@@ -25,11 +25,12 @@ export class ToolbarSelect extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { visibility: 'hidden' };
+    this.state = { visible: false };
   }
 
   render() {
     let selectedChild;
+    const visible = this.state.visible;
     const optionChildren = React.Children.map(this.props.children,
     (child, i) => {
       if (!selectedChild || child.props.selected) {
@@ -37,15 +38,12 @@ export class ToolbarSelect extends React.Component {
       }
       const onChildSelect =
       child.props.onSelect ||
-      this.props.onSelect && this.props.onSelect.bind(null,
-        child.props.value,
-        i
+        this.props.onSelect && this.props.onSelect.bind(null,
+          child.props.value,
+          i
       );
       return <ToolbarSelectOption {...child.props} onSelect={onChildSelect} />;
     });
-    const ulStyle = {
-      visibility: this.state.visibility
-    };
     return (
       <a
         className="toolbar-select toolbar-button"
@@ -58,7 +56,7 @@ export class ToolbarSelect extends React.Component {
           <path fill="#666" d="M 5 5 L 13 5 L 9 1 z" />
           <path fill="#666" d="M 5 6 L 13 6 L 9 10 z" />
         </svg>
-        <ul className="toolbar-select-options" style={ulStyle}>
+        <ul className={'toolbar-select-options' + (visible ? ' open' : '')}>
           {optionChildren}
         </ul>
       </a>
@@ -68,13 +66,14 @@ export class ToolbarSelect extends React.Component {
   handleClick(e) {
     if (this._node !== e.target) {
       e.preventDefault();
-      this.setState({ visibility: 'hidden' });
+      this.setState({ visible: false });
+      document.removeEventListener('click', this.handleClick.bind(this));
     }
   }
 
   handleOpen = e => {
     e.preventDefault();
-    this.setState({ visibility: 'visible' });
+    this.setState({ visible: true });
     document.addEventListener('click', this.handleClick.bind(this));
   };
 

From 554378d24b12f1546e0b0e25f180f2bd3070d648 Mon Sep 17 00:00:00 2001
From: Angel Gomez Salazar <agomezs@fb.com>
Date: Wed, 15 Feb 2017 15:55:12 -0800
Subject: [PATCH 08/11] Make Usage of preventDefault uniform

---
 src/components/ToolbarMenu.js   | 4 ++--
 src/components/ToolbarSelect.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ToolbarMenu.js b/src/components/ToolbarMenu.js
index 7491322b9f1..e4fc8e46d4c 100644
--- a/src/components/ToolbarMenu.js
+++ b/src/components/ToolbarMenu.js
@@ -47,14 +47,14 @@ export class ToolbarMenu extends React.Component {
 
   handleClick(e) {
     if (this._node !== e.target) {
-      e.preventDefault();
+      preventDefault(e);
       this.setState({ visible: false });
       document.removeEventListener('click', this.handleClick.bind(this));
     }
   }
 
   handleOpen = e => {
-    e.preventDefault();
+    preventDefault(e);
     this.setState({ visible: true });
     document.addEventListener('click', this.handleClick.bind(this));
   };
diff --git a/src/components/ToolbarSelect.js b/src/components/ToolbarSelect.js
index 169e9b3f553..b5fbf5233f5 100644
--- a/src/components/ToolbarSelect.js
+++ b/src/components/ToolbarSelect.js
@@ -65,14 +65,14 @@ export class ToolbarSelect extends React.Component {
 
   handleClick(e) {
     if (this._node !== e.target) {
-      e.preventDefault();
+      preventDefault(e)
       this.setState({ visible: false });
       document.removeEventListener('click', this.handleClick.bind(this));
     }
   }
 
   handleOpen = e => {
-    e.preventDefault();
+    preventDefault(e)
     this.setState({ visible: true });
     document.addEventListener('click', this.handleClick.bind(this));
   };

From ab03349464498ab272da475f345b40f74c6cf8e1 Mon Sep 17 00:00:00 2001
From: Angel Gomez Salazar <agomezs@fb.com>
Date: Wed, 15 Feb 2017 15:57:34 -0800
Subject: [PATCH 09/11] Fix lint error

---
 src/components/ToolbarSelect.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ToolbarSelect.js b/src/components/ToolbarSelect.js
index b5fbf5233f5..e0cb67dddaf 100644
--- a/src/components/ToolbarSelect.js
+++ b/src/components/ToolbarSelect.js
@@ -65,14 +65,14 @@ export class ToolbarSelect extends React.Component {
 
   handleClick(e) {
     if (this._node !== e.target) {
-      preventDefault(e)
+      preventDefault(e);
       this.setState({ visible: false });
       document.removeEventListener('click', this.handleClick.bind(this));
     }
   }
 
   handleOpen = e => {
-    preventDefault(e)
+    preventDefault(e);
     this.setState({ visible: true });
     document.addEventListener('click', this.handleClick.bind(this));
   };

From 88cdeea991bc59a2cc5f524c5a7c8db854001df3 Mon Sep 17 00:00:00 2001
From: Angel Gomez Salazar <agomezs@fb.com>
Date: Wed, 15 Feb 2017 16:16:52 -0800
Subject: [PATCH 10/11] Add eventListener removal in componentWillUnmount jic

---
 src/components/ToolbarMenu.js   | 4 ++++
 src/components/ToolbarSelect.js | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/ToolbarMenu.js b/src/components/ToolbarMenu.js
index e4fc8e46d4c..818f881878d 100644
--- a/src/components/ToolbarMenu.js
+++ b/src/components/ToolbarMenu.js
@@ -25,6 +25,10 @@ export class ToolbarMenu extends React.Component {
     this.state = { visible: false };
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClick.bind(this));
+  }
+
   render() {
     const visible = this.state.visible;
     return (
diff --git a/src/components/ToolbarSelect.js b/src/components/ToolbarSelect.js
index e0cb67dddaf..88c6cd38086 100644
--- a/src/components/ToolbarSelect.js
+++ b/src/components/ToolbarSelect.js
@@ -28,6 +28,10 @@ export class ToolbarSelect extends React.Component {
     this.state = { visible: false };
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClick.bind(this));
+  }
+
   render() {
     let selectedChild;
     const visible = this.state.visible;

From bf71f4cd9ef0c009410e5bd72c59a2b4d13b227d Mon Sep 17 00:00:00 2001
From: Angel Gomez Salazar <agomezs@fb.com>
Date: Thu, 16 Feb 2017 00:50:37 -0800
Subject: [PATCH 11/11] Change to make sure that the listener is removed

---
 src/components/ToolbarMenu.js   | 20 +++++++++++++++++---
 src/components/ToolbarSelect.js | 20 +++++++++++++++++---
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/ToolbarMenu.js b/src/components/ToolbarMenu.js
index 818f881878d..4ea4eef4900 100644
--- a/src/components/ToolbarMenu.js
+++ b/src/components/ToolbarMenu.js
@@ -26,7 +26,7 @@ export class ToolbarMenu extends React.Component {
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleClick.bind(this));
+    this._release();
   }
 
   render() {
@@ -49,18 +49,32 @@ export class ToolbarMenu extends React.Component {
     );
   }
 
+  _subscribe() {
+    if (!this._listener) {
+      this._listener = this.handleClick.bind(this);
+      document.addEventListener('click', this._listener);
+    }
+  }
+
+  _release() {
+    if (this._listener) {
+      document.removeEventListener('click', this._listener);
+      this._listener = null;
+    }
+  }
+
   handleClick(e) {
     if (this._node !== e.target) {
       preventDefault(e);
       this.setState({ visible: false });
-      document.removeEventListener('click', this.handleClick.bind(this));
+      this._release();
     }
   }
 
   handleOpen = e => {
     preventDefault(e);
     this.setState({ visible: true });
-    document.addEventListener('click', this.handleClick.bind(this));
+    this._subscribe();
   };
 }
 
diff --git a/src/components/ToolbarSelect.js b/src/components/ToolbarSelect.js
index 88c6cd38086..cc8b7101922 100644
--- a/src/components/ToolbarSelect.js
+++ b/src/components/ToolbarSelect.js
@@ -29,7 +29,7 @@ export class ToolbarSelect extends React.Component {
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleClick.bind(this));
+    this._release();
   }
 
   render() {
@@ -67,18 +67,32 @@ export class ToolbarSelect extends React.Component {
     );
   }
 
+  _subscribe() {
+    if (!this._listener) {
+      this._listener = this.handleClick.bind(this);
+      document.addEventListener('click', this._listener);
+    }
+  }
+
+  _release() {
+    if (this._listener) {
+      document.removeEventListener('click', this._listener);
+      this._listener = null;
+    }
+  }
+
   handleClick(e) {
     if (this._node !== e.target) {
       preventDefault(e);
       this.setState({ visible: false });
-      document.removeEventListener('click', this.handleClick.bind(this));
+      this._release();
     }
   }
 
   handleOpen = e => {
     preventDefault(e);
     this.setState({ visible: true });
-    document.addEventListener('click', this.handleClick.bind(this));
+    this._subscribe();
   };
 
 }