Refactor for clean handling of tooltip close.

ui/app/components/gas-tooltip.js

@@ -16,6 +16,7 @@ function GasTooltip () {
 
   this.updateGasPrice = this.updateGasPrice.bind(this);
   this.updateGasLimit = this.updateGasLimit.bind(this);
+  this.onClose = this.onClose.bind(this);
 }
 
 GasTooltip.prototype.componentWillMount = function () {
@@ -40,14 +41,20 @@ GasTooltip.prototype.updateGasLimit = function (newLimit) {
   onFeeChange({ gasLimit: newLimit, gasPrice })
 }
 
+GasTooltip.prototype.onClose = function (e) {
+  e.stopPropagation();
+  this.props.onClose();
+}
+
 GasTooltip.prototype.render = function () {
-  const { position, title, children, className, isOpen } = this.props
+  const { position, title, children, className } = this.props
   const { gasPrice, gasLimit } = this.state
 
-  this.manageListeners()
+  return h('div', {}, [
-  
+    h('div.gas-tooltip-close-area', {
-  return isOpen
+      onClick: this.onClose
-    ? h('div.customize-gas-tooltip-container', {}, [
+    }),
+    h('div.customize-gas-tooltip-container', {}, [
       h('div.customize-gas-tooltip', {}, [
         h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
         h('div.gas-tooltip-input-label', {}, [
@@ -82,55 +89,6 @@ GasTooltip.prototype.render = function () {
       ]),
       h('div.gas-tooltip-arrow', {}),
     ])
-    : null
+  ])
-}
-
-GasTooltip.prototype.manageListeners = function () {
-  const isOpen = this.props.isOpen
-  const onClickOutside = this.props.onClickOutside
-
-  if (isOpen) {
-    this.outsideClickHandler = onClickOutside
-  } else if (!isOpen) {
-    this.outsideClickHandler = null
-  }
-}
-
-GasTooltip.prototype.componentDidMount = function () {
-  if (this && document.body) {
-    this.globalClickHandler = this.globalClickOccurred.bind(this)
-    document.body.addEventListener('click', this.globalClickHandler)
-    var container = findDOMNode(this)
-    this.container = container
-  }
-}
-
-GasTooltip.prototype.componentWillUnmount = function () {
-  if (this && document.body) {
-    document.body.removeEventListener('click', this.globalClickHandler)
-  }
-}
-
-GasTooltip.prototype.globalClickOccurred = function (event) {
-  const target = event.target
-  const container = findDOMNode(this)
-  
-  if (target !== container &&
-    !isDescendant(container, target) &&
-    this.outsideClickHandler) {
-    this.outsideClickHandler(event)
-  }
-}
-
-function isDescendant (parent, child) {
-  var node = child.parentNode
-  while (node !== null) {
-    if (node === parent) {
-      return true
-    }
-    node = node.parentNode
-  }
-
-  return false
 }
 

ui/app/css/itcss/components/send.scss

@@ -95,6 +95,15 @@
   cursor: pointer;
 }
 
+.gas-tooltip-close-area {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+}
+
 .customize-gas-tooltip-container {
   position: absolute;
   left: 76px;

ui/app/send.js

@@ -267,18 +267,17 @@ SendTransactionScreen.prototype.render = function () {
             })
             : h('div', {}, [`${this.state.newTx.gasFee} ETH`]),
             h('div.send-screen-gas-input-customize', {
-              onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen),
+              onClick: () => this.toggleTooltip.bind(this)(!this.state.tooltipIsOpen),
             }, [
               'Customize'
             ]),
           ]),
 
-          h(GasTooltip, {
+          this.state.tooltipIsOpen && h(GasTooltip, {
-            isOpen: this.state.tooltipIsOpen,
             className: 'send-tooltip',
             gasPrice: parseInt(this.state.newTx.gasPrice, 16),
             gasLimit: parseInt(this.state.newTx.gas, 16),
-            onClickOutside: () => this.setTooltipOpen.bind(this)(false),
+            onClose: this.closeTooltip.bind(this),
             onFeeChange: ({gasLimit, gasPrice}) => {
               this.setState({
                 newTx: Object.assign(
@@ -585,8 +584,12 @@ SendTransactionScreen.prototype.renderSendToken = function () {
   )
 }
 
-SendTransactionScreen.prototype.setTooltipOpen = function (isOpen) {
+SendTransactionScreen.prototype.toggleTooltip = function () {
-  this.setState({ tooltipIsOpen: isOpen })
+  this.setState({ tooltipIsOpen: !this.state.tooltipIsOpen })
+}
+
+SendTransactionScreen.prototype.closeTooltip = function () {
+  this.setState({ tooltipIsOpen: false })
 }
 
 SendTransactionScreen.prototype.setCurrentCurrency = function (newCurrency) {