Tooltip closing on click outside.

ui/app/components/gas-tooltip.js

@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const InputNumber = require('./input-number.js')
+const findDOMNode = require('react-dom').findDOMNode
 
 module.exports = GasTooltip
 
@@ -17,12 +18,6 @@ function GasTooltip () {
   this.updateGasLimit = this.updateGasLimit.bind(this);
 }
 
-GasTooltip.prototype.componentWillMount == function () {
-  const { gasPrice = 0, gasLimit = 0 } = this.props
-
-  this.setState({ gasPrice, gasLimit });
-}
-
 GasTooltip.prototype.updateGasPrice = function (newPrice) {
   const { onFeeChange } = this.props
   const { gasLimit } = this.state
@@ -42,6 +37,8 @@ GasTooltip.prototype.updateGasLimit = function (newLimit) {
 GasTooltip.prototype.render = function () {
   const { position, title, children, className, isOpen } = this.props
   const { gasPrice, gasLimit } = this.state
+
+  this.manageListeners()
   
   return isOpen
     ? h('div.customize-gas-tooltip-container', {}, [
@@ -77,3 +74,56 @@ GasTooltip.prototype.render = function () {
       ])
     : 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)
+  console.log(`target`, target);
+  console.log(`container`, container);
+  console.log(`this.container`, this.container);
+  console.log(`this.outsideClickHandler`, this.outsideClickHandler);
+  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/send.js

@@ -58,7 +58,7 @@ function SendTransactionScreen () {
       txData: null,
       memo: '',
     },
-    tooltipShown: false,
+    tooltipIsOpen: false,
   }
 }
 
@@ -221,14 +221,15 @@ SendTransactionScreen.prototype.render = function () {
           }, []),
 
           h('div.send-screen-gas-input-customize', {
-            onClick: this.toggleTooltip.bind(this),
+            onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen),
           }, [
             'Customize'
           ]),
 
           h(GasTooltip, {
-            isOpen: this.state.tooltipShown,
+            isOpen: this.state.tooltipIsOpen,
             className: 'send-tooltip',
+            onClickOutside: () => this.setTooltipOpen.bind(this)(false),
             onFeeChange: ({gasLimit, gasPrice}) => {
               this.setState({
                 newTx: Object.assign(
@@ -532,8 +533,8 @@ SendTransactionScreen.prototype.renderSendToken = function () {
   )
 }
 
-SendTransactionScreen.prototype.toggleTooltip = function () {
-  this.setState({ tooltipShown: !this.state.tooltipShown })
+SendTransactionScreen.prototype.setTooltipOpen = function (isOpen) {
+  this.setState({ tooltipIsOpen: isOpen })
 }
 
 SendTransactionScreen.prototype.navigateToAccounts = function (event) {