Added toggle fix for dropdown device menu

Summary:
Summary of Bug:

The devices menu popup does not toggle as expected.

Because of the way the click event is fired in Javascript, that is mousedown, mouseup, click, and the fact that the electron menu closes on mousedown, was why the menu was not toggling as expected.

Fix:

This is a potential fix where I add some state to tell if the menu was recently closed, and disable the popup if it was. This is done through the callback method of menu.popup. Then on the next mouse event I renable the popup.

In addition to this, I moved the popup logic into onMouseUp instead of onClick. This was simply to make the code neater. Before I would have to add a timer to the onMouseUp event that would fire after the click event and renable the popup.

Let me know if there is a simple solution to this problem that I've completely missed.

Reviewed By: jknoxville

Differential Revision: D16028864

fbshipit-source-id: a73202536762cce2ab623176cbda0369ca2b8079

src/ui/components/Button.js

@@ -227,6 +227,7 @@ type Props = {
 
 type State = {
   active: boolean,
+  wasClosed: boolean,
 };
 
 /**
@@ -242,18 +243,17 @@ class Button extends React.Component<
 
   state = {
     active: false,
+    wasClosed: false,
   };
 
   _ref = React.createRef();
 
-  onMouseDown = () => this.setState({active: true});
+  onMouseDown = () => this.setState({active: true, wasClosed: false});
-  onMouseUp = () => this.setState({active: false});
+  onMouseUp = () => {
-
-  onClick = (e: SyntheticMouseEvent<>) => {
     if (this.props.disabled === true) {
       return;
     }
-    if (this.props.dropdown) {
+    if (this.props.dropdown && !this.state.wasClosed) {
       const menu = electron.remote.Menu.buildFromTemplate(this.props.dropdown);
       const position = {};
       const {current} = this._ref;
@@ -269,8 +269,18 @@ class Button extends React.Component<
         window: electron.remote.getCurrentWindow(),
         async: true,
         ...position,
+        callback: () => {
+          this.setState({wasClosed: true});
+        },
       });
     }
+    this.setState({active: false, wasClosed: false});
+  };
+
+  onClick = (e: SyntheticMouseEvent<>) => {
+    if (this.props.disabled === true) {
+      return;
+    }
     if (this.props.onClick) {
       this.props.onClick(e);
     }