Account selector close operations (#4728)

* Close when clicking anywhere on body pane

* Allow click to propagate on address click

* Rename noCopy -> allowAddressClick

* Handle i18n strings in input

* Close on pasted addresses (valid entry)

* allowAddressClick default

* Don't do onClick on AccountCard if text is selected

* Reset filter value on close for address selection

* Better close on click for AccountSelection

js/src/ui/AccountCard/accountCard.js

@@ -28,12 +28,17 @@ import styles from './accountCard.css';
 export default class AccountCard extends Component {
   static propTypes = {
     account: PropTypes.object.isRequired,
+    allowAddressClick: PropTypes.bool,
     balance: PropTypes.object,
     className: PropTypes.string,
     onClick: PropTypes.func,
     onFocus: PropTypes.func
   };
 
+  static defaultProps = {
+    allowAddressClick: false
+  };
+
   state = {
     copied: false
   };
@@ -122,7 +127,7 @@ export default class AccountCard extends Component {
       <div className={ styles.addressContainer }>
         <span
           className={ styles.address }
-          onClick={ this.preventEvent }
+          onClick={ this.handleAddressClick }
           ref={ `address` }
           title={ address }
         >
@@ -132,6 +137,17 @@ export default class AccountCard extends Component {
     );
   }
 
+  handleAddressClick = (event) => {
+    const { allowAddressClick } = this.props;
+
+    // Don't stop the event if address click is allowed
+    if (allowAddressClick) {
+      return this.onClick(event);
+    }
+
+    return this.preventEvent(event);
+  }
+
   handleKeyDown = (event) => {
     const codeName = keycode(event);
 
@@ -172,9 +188,14 @@ export default class AccountCard extends Component {
     }
   }
 
-  onClick = () => {
+  onClick = (event) => {
     const { account, onClick } = this.props;
 
+    // Stop the default event if text is selected
+    if (window.getSelection && window.getSelection().type === 'Range') {
+      return this.preventEvent(event);
+    }
+
     onClick && onClick(account.address);
   }
 
@@ -184,9 +205,9 @@ export default class AccountCard extends Component {
     onFocus && onFocus(account.index);
   }
 
-  preventEvent = (e) => {
+  preventEvent = (event) => {
-    e.preventDefault();
+    event.preventDefault();
-    e.stopPropagation();
+    event.stopPropagation();
   }
 
   setTagRef = (tagRef) => {

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -23,6 +23,7 @@ import { observer } from 'mobx-react';
 
 import TextFieldUnderline from 'material-ui/TextField/TextFieldUnderline';
 
+import apiutil from '~/api/util';
 import AccountCard from '~/ui/AccountCard';
 import InputAddress from '~/ui/Form/InputAddress';
 import Loading from '~/ui/Loading';
@@ -177,6 +178,7 @@ class AddressSelect extends Component {
       <Portal
         className={ styles.inputContainer }
         isChildModal
+        onClick={ this.handleClose }
         onClose={ this.handleClose }
         onKeyDown={ this.handleKeyDown }
         open={ expanded }
@@ -191,6 +193,7 @@ class AddressSelect extends Component {
                 className={ styles.input }
                 placeholder={ ilHint }
                 onBlur={ this.handleInputBlur }
+                onClick={ this.stopEvent }
                 onFocus={ this.handleInputFocus }
                 onChange={ this.handleChange }
                 ref={ this.setInputRef }
@@ -345,6 +348,7 @@ class AddressSelect extends Component {
     return (
       <AccountCard
         account={ account }
+        allowAddressClick
         balance={ balance }
         className={ styles.account }
         key={ `account_${index}` }
@@ -377,6 +381,10 @@ class AddressSelect extends Component {
     }
   }
 
+  stopEvent = (event) => {
+    event.stopPropagation();
+  }
+
   handleInputAddresKeydown = (event) => {
     const code = keycode(event);
 
@@ -588,6 +596,7 @@ class AddressSelect extends Component {
     }
 
     this.store.resetRegistryValues();
+    this.store.handleChange('');
 
     this.setState({
       expanded: false,
@@ -613,6 +622,10 @@ class AddressSelect extends Component {
       focusedItem: null,
       inputValue: value
     });
+
+    if (apiutil.isAddressValid(value)) {
+      this.handleClick(value);
+    }
   }
 }
 

js/src/ui/Form/InputAddressSelect/inputAddressSelect.js

@@ -17,6 +17,8 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 
+import { nodeOrStringProptype } from '~/util/proptypes';
+
 import AddressSelect from '../AddressSelect';
 
 class InputAddressSelect extends Component {
@@ -27,9 +29,9 @@ class InputAddressSelect extends Component {
 
     allowCopy: PropTypes.bool,
     className: PropTypes.string,
-    error: PropTypes.string,
+    error: nodeOrStringProptype(),
-    hint: PropTypes.string,
+    hint: nodeOrStringProptype(),
-    label: PropTypes.string,
+    label: nodeOrStringProptype(),
     onChange: PropTypes.func,
     readOnly: PropTypes.bool,
     value: PropTypes.string

js/src/ui/Portal/portal.js

@@ -44,6 +44,7 @@ export default class Portal extends Component {
     hideClose: PropTypes.bool,
     isChildModal: PropTypes.bool,
     isSmallModal: PropTypes.bool,
+    onClick: PropTypes.func,
     onKeyDown: PropTypes.func,
     steps: PropTypes.array,
     title: nodeOrStringProptype()
@@ -89,7 +90,7 @@ export default class Portal extends Component {
                 className
               ].join(' ')
             }
-            onClick={ this.stopEvent }
+            onClick={ this.handleContainerClick }
             onKeyDown={ this.handleKeyDown }
           >
             <EventListener
@@ -149,6 +150,16 @@ export default class Portal extends Component {
     event.stopPropagation();
   }
 
+  handleContainerClick = (event) => {
+    const { onClick } = this.props;
+
+    if (!onClick) {
+      return this.stopEvent(event);
+    }
+
+    return onClick(event);
+  }
+
   handleClose = () => {
     const { hideClose, onClose } = this.props;