Make address selection searchable (#2739)

* Remove padding on address input if empty (#2141)

* Use Autocomplete to make address selection searchable (#2141)

* Adds AutoComplete Wrapper (#2141)

js/src/ui/Form/InputAddress/inputAddress.css

@@ -22,6 +22,10 @@
   padding-left: 48px !important;
 }
 
+.inputEmpty input {
+  padding-left: 0 !important;
+}
+
 .icon {
   position: absolute;
   top: 35px;

js/src/ui/Form/InputAddress/inputAddress.js

@@ -38,22 +38,40 @@ class InputAddress extends Component {
     onSubmit: PropTypes.func
   };
 
+  state = {
+    isEmpty: false
+  }
+
+  componentWillMount () {
+    const { value, text, accountsInfo, tokens } = this.props;
+    const account = accountsInfo[value] || tokens[value];
+    const hasAccount = account && !account.meta.deleted;
+    const inputValue = text && hasAccount ? account.name : value;
+    const isEmpty = (inputValue.length === 0);
+
+    this.setState({ isEmpty });
+  }
+
   render () {
-    const { className, disabled, error, label, hint, value, text, onChange, onSubmit, accountsInfo, tokens } = this.props;
-    const classes = `${styles.input} ${className}`;
+    const { className, disabled, error, label, hint, value, text, onSubmit, accountsInfo, tokens } = this.props;
+    const { isEmpty } = this.state;
+
+    const classes = [ className ];
+    classes.push(isEmpty ? styles.inputEmpty : styles.input);
+
     const account = accountsInfo[value] || tokens[value];
     const hasAccount = account && !account.meta.deleted;
 
     return (
       <div className={ styles.container }>
         <Input
-          className={ classes }
+          className={ classes.join(' ') }
           disabled={ disabled }
           label={ label }
           hint={ hint }
           error={ error }
           value={ text && hasAccount ? account.name : value }
-          onChange={ onChange }
+          onChange={ this.handleInputChange }
           onSubmit={ onSubmit } />
         { this.renderIcon() }
       </div>
@@ -75,6 +93,13 @@ class InputAddress extends Component {
       </div>
     );
   }
+
+  handleInputChange = (event, value) => {
+    const isEmpty = (value.length === 0);
+
+    this.setState({ isEmpty });
+    this.props.onChange(event, value);
+  }
 }
 
 function mapStateToProps (state) {