handle click outside dropdown

react/src/components/dashboard/sendCoin.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Config from '../../config';
 import { translate } from '../../translate/translate';
 import {
@@ -31,6 +32,7 @@ import io from 'socket.io-client';
 const socket = io.connect('http://127.0.0.1:' + Config.agamaPort);
 
 // TODO: prevent any cache updates rather than utxo while on send coin form
+//       fix a bug - total amount is incorrect when switching between steps
 
 class SendCoin extends React.Component {
   constructor(props) {
@@ -57,9 +59,28 @@ class SendCoin extends React.Component {
     this.getOAdress = this.getOAdress.bind(this);
     this.toggleSendAPIType = this.toggleSendAPIType.bind(this);
     this._fetchNewUTXOData = this._fetchNewUTXOData.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
     socket.on('messages', msg => this.updateSocketsData(msg));
   }
 
+  componentWillMount() {
+    document.addEventListener('click', this.handleClickOutside, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClickOutside, false);
+  }
+
+  handleClickOutside(e) {
+    if (e.srcElement.className !== 'btn dropdown-toggle btn-info' &&
+        (e.srcElement.offsetParent && e.srcElement.offsetParent.className !== 'btn dropdown-toggle btn-info') &&
+        (e.path && e.path[4] && e.path[4].className.indexOf('showkmdwalletaddrs') === -1)) {
+      this.setState({
+        addressSelectorOpen: false,
+      });
+    }
+  }
+
   componentWillReceiveProps(props) {
     if (!this.state.sendFrom && this.props.ActiveCoin.activeAddress) {
       this.setState(Object.assign({}, this.state, {
@@ -270,7 +291,7 @@ class SendCoin extends React.Component {
 
   renderAddressList() {
     return (
-      <div className={ 'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '') }>
+      <div id="showkmdwalletaddrs" className={ 'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '') }>
         <button
           type="button"
           className="btn dropdown-toggle btn-info"

react/src/components/dashboard/walletsData.js

@@ -57,9 +57,33 @@ class WalletsData extends React.Component {
     this._fetchUtxoCache = this._fetchUtxoCache.bind(this);
     this.restartBasiliskInstance = this.restartBasiliskInstance.bind(this);
     this.basiliskRefreshActionOne = this.basiliskRefreshActionOne.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
     socket.on('messages', msg => this.updateSocketsData(msg));
   }
 
+  componentWillMount() {
+    document.addEventListener('click', this.handleClickOutside, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClickOutside, false);
+  }
+
+  handleClickOutside(e) {
+    console.log(e);
+
+    if (e.srcElement.className !== 'btn dropdown-toggle btn-info' &&
+        (e.srcElement.offsetParent && e.srcElement.offsetParent.className !== 'btn dropdown-toggle btn-info') &&
+        (e.path && e.path[4] && e.path[4].className.indexOf('showkmdwalletaddrs') === -1) &&
+        (e.srcElement.offsetParent && e.srcElement.offsetParent.className.indexOf('dropdown') === -1) &&
+        e.srcElement.className !== 'dropdown-toggle btn-xs btn-default') {
+      this.setState({
+        addressSelectorOpen: false,
+        basiliskActionsMenu: false,
+      });
+    }
+  }
+
   componentDidMount() {
     console.log('use cache = ', this.state.useCache);
   }

react/src/components/dashboard/walletsNativeSend.js

@@ -27,6 +27,25 @@ class WalletsNativeSend extends React.Component {
     this.handleSubmit = this.handleSubmit.bind(this);
     this.openDropMenu = this.openDropMenu.bind(this);
     this.getOAdress = this.getOAdress.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+
+  componentWillMount() {
+    document.addEventListener('click', this.handleClickOutside, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClickOutside, false);
+  }
+
+  handleClickOutside(e) {
+    if (e.srcElement.className !== 'btn dropdown-toggle btn-info' &&
+        (e.srcElement.offsetParent && e.srcElement.offsetParent.className !== 'btn dropdown-toggle btn-info') &&
+        (e.path && e.path[4] && e.path[4].className.indexOf('showkmdwalletaddrs') === -1)) {
+      this.setState({
+        addressSelectorOpen: false,
+      });
+    }
   }
 
   renderAddressByType(type) {