Fix network dropdown button (#10312)

This fixes a bug where the network menu would remain present after a
second click on the network menu button. The bug was caused by the
click being handled _twice_, by two separate handlers. First it was
caught by the external click handler of the dropdown menu, which closed
the menu. Second, it was caught by the network button itself, which re-
opened the menu. This all happens quickly enough that to the user it
appears to stay open.

The external click handler of the menu now only fires if the menu is
open. Additionally, any click that is caught by the network menu is
stopped from propagating further, so that it can't trigger additional
click handlers.

test/e2e/metamask-ui.spec.js

@@ -1798,6 +1798,11 @@ describe('MetaMask', function () {
         By.xpath(`//span[contains(text(), 'http://127.0.0.1:8545/')]`),
       )
 
+      // click Mainnet to dismiss network dropdown
+      await driver.clickElement(
+        By.xpath(`//span[contains(text(), 'Ethereum Mainnet')]`),
+      )
+
       assert.equal(customRpcs.length, 2)
     })
 

ui/app/components/app/dropdowns/network-dropdown.js

@@ -255,6 +255,7 @@ class NetworkDropdown extends Component {
           )
 
           if (notToggleElementIndex === -1) {
+            event.stopPropagation()
             this.props.hideNetworkDropdown()
           }
         }}

ui/app/components/app/menu-droppo.js

@@ -37,6 +37,7 @@ export default class MenuDroppoComponent extends Component {
     const container = findDOMNode(this)
 
     if (
+      this.props.isOpen &&
       target !== container &&
       !isDescendant(this.container, event.target) &&
       this.props.onClickOutside