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,97 +41,54 @@ 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', {}, [
+    h('div.customize-gas-tooltip-container', {}, [
-          h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
+      h('div.customize-gas-tooltip', {}, [
-          h('div.gas-tooltip-input-label', {}, [
+        h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
-            h('span.gas-tooltip-label', {}, ['Gas Price']),
+        h('div.gas-tooltip-input-label', {}, [
-            h('i.fa.fa-info-circle')
+          h('span.gas-tooltip-label', {}, ['Gas Price']),
-          ]),
+          h('i.fa.fa-info-circle')
-          h(InputNumber, {
-            unitLabel: 'GWEI',
-            step: 0.0001,
-            min: 0.0000,
-            placeholder: '0.0000',
-            fixed: 4,
-            initValue: gasPrice,
-            onChange: (newPrice) => this.updateGasPrice(newPrice), 
-          }),
-          h('div.gas-tooltip-input-label', {
-            style: {
-              'marginTop': '81px',
-            },
-          }, [
-            h('span.gas-tooltip-label', {}, ['Gas Limit']),
-            h('i.fa.fa-info-circle')
-          ]),
-          h(InputNumber, {
-            unitLabel: 'UNITS',
-            step: 1,
-            min: 0,
-            placeholder: '0',
-            initValue: gasLimit,
-            onChange: (newLimit) => this.updateGasLimit(newLimit),  
-          }),
         ]),
-        h('div.gas-tooltip-arrow', {}),
+        h(InputNumber, {
-      ])
+          unitLabel: 'GWEI',
-    : null
+          step: 0.0001,
-}
+          min: 0.0000,
-
+          placeholder: '0.0000',
-GasTooltip.prototype.manageListeners = function () {
+          fixed: 4,
-  const isOpen = this.props.isOpen
+          initValue: gasPrice,
-  const onClickOutside = this.props.onClickOutside
+          onChange: (newPrice) => this.updateGasPrice(newPrice), 
-
+        }),
-  if (isOpen) {
+        h('div.gas-tooltip-input-label', {
-    this.outsideClickHandler = onClickOutside
+          style: {
-  } else if (!isOpen) {
+            'marginTop': '81px',
-    this.outsideClickHandler = null
+          },
-  }
+        }, [
-}
+          h('span.gas-tooltip-label', {}, ['Gas Limit']),
-
+          h('i.fa.fa-info-circle')
-GasTooltip.prototype.componentDidMount = function () {
+        ]),
-  if (this && document.body) {
+        h(InputNumber, {
-    this.globalClickHandler = this.globalClickOccurred.bind(this)
+          unitLabel: 'UNITS',
-    document.body.addEventListener('click', this.globalClickHandler)
+          step: 1,
-    var container = findDOMNode(this)
+          min: 0,
-    this.container = container
+          placeholder: '0',
-  }
+          initValue: gasLimit,
-}
+          onChange: (newLimit) => this.updateGasLimit(newLimit),  
-
+        }),
-GasTooltip.prototype.componentWillUnmount = function () {
+      ]),
-  if (this && document.body) {
+      h('div.gas-tooltip-arrow', {}),
-    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) {