Bumped Material UI version (fixing issues with AutoComplete) (#2790)

Fixed issues with Searchable addresses

js/package.json

@@ -116,7 +116,7 @@
     "js-sha3": "^0.5.2",
     "lodash": "^4.11.1",
     "marked": "^0.3.6",
-    "material-ui": "^0.15.4",
+    "material-ui": "^0.16.1",
     "material-ui-chip-input": "^0.8.0",
     "moment": "^2.14.1",
     "react": "^15.2.1",

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

@@ -37,13 +37,14 @@ export default class AddressSelect extends Component {
   }
 
   state = {
-    entries: {}
+    entries: {},
+    value: ''
   }
 
   componentWillMount () {
-    const { accounts, contacts } = this.props;
+    const { accounts, contacts, value } = this.props;
     const entries = Object.assign({}, accounts || {}, contacts || {});
-    this.setState({ entries });
+    this.setState({ entries, value });
   }
 
   componentWillReceiveProps (newProps) {
@@ -55,34 +56,36 @@ export default class AddressSelect extends Component {
   render () {
     const { disabled, error, hint, label } = this.props;
     const { entries } = this.state;
+    const value = this.getSearchText();
 
     return (
       <div className={ styles.container }>
         <AutoComplete
-          className={ error ? '' : styles.paddedInput }
+          className={ (error || !value) ? '' : styles.paddedInput }
           disabled={ disabled }
           label={ label }
-          hint={ `search for ${hint}` }
+          hint={ hint ? `search for ${hint}` : 'search for an address' }
           error={ error }
           onChange={ this.onChange }
-          value={ this.getSearchText() }
+          value={ value }
           filter={ this.handleFilter }
           entries={ entries }
+          entry={ this.getEntry() || {} }
           renderItem={ this.renderItem }
         />
 
-        { this.renderIdentityIcon() }
+        { this.renderIdentityIcon(value) }
       </div>
     );
   }
 
-  renderIdentityIcon () {
+  renderIdentityIcon (inputValue) {
-    if (this.props.error) {
+    const { error, value } = this.props;
+
+    if (error || !inputValue) {
       return null;
     }
 
-    const { value } = this.props;
-
     return (
       <IdentityIcon
         className={ styles.icon }
@@ -125,14 +128,18 @@ export default class AddressSelect extends Component {
   }
 
   getSearchText () {
+    const entry = this.getEntry();
+    if (!entry) return '';
+
+    return entry.name ? entry.name.toUpperCase() : '';
+  }
+
+  getEntry () {
     const { value } = this.props;
     if (!value) return '';
 
     const { entries } = this.state;
-    const entry = entries[value];
+    return entries[value];
-    if (!entry) return '';
-
-    return entry.name ? entry.name.toUpperCase() : '';
   }
 
   handleFilter = (searchText, address) => {
@@ -143,8 +150,11 @@ export default class AddressSelect extends Component {
       .some(text => text.toLowerCase().indexOf(lowCaseSearch) !== -1);
   }
 
-  onChange = (entry) => {
+  onChange = (entry, empty) => {
-    const address = entry ? entry.address : '';
+    const address = entry && entry.address
+      ? entry.address
+      : (empty ? '' : this.state.value);
+
     this.props.onChange(null, address);
   }
 }

js/src/ui/Form/AutoComplete/autocomplete.js

@@ -16,6 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { MenuItem, AutoComplete as MUIAutoComplete } from 'material-ui';
+import { PopoverAnimationVertical } from 'material-ui/Popover';
 
 export default class AutoComplete extends Component {
   static propTypes = {
@@ -28,14 +29,22 @@ export default class AutoComplete extends Component {
     className: PropTypes.string,
     filter: PropTypes.func,
     renderItem: PropTypes.func,
+    entry: PropTypes.object,
     entries: PropTypes.oneOfType([
       PropTypes.array,
       PropTypes.object
     ])
   }
 
+  state = {
+    lastChangedValue: undefined,
+    entry: null,
+    open: false
+  }
+
   render () {
     const { disabled, error, hint, label, value, className, filter } = this.props;
+    const { open } = this.state;
 
     return (
       <MUIAutoComplete
@@ -47,9 +56,13 @@ export default class AutoComplete extends Component {
         onNewRequest={ this.onChange }
         searchText={ value }
         onFocus={ this.onFocus }
+        onBlur={ this.onBlur }
+        animation={ PopoverAnimationVertical }
 
         filter={ filter }
+        popoverProps={ { open } }
         openOnFocus
+        menuCloseDelay={ 0 }
         fullWidth
         floatingLabelFixed
         dataSource={ this.getDataSource() }
@@ -78,18 +91,45 @@ export default class AutoComplete extends Component {
   }
 
   onChange = (item, idx) => {
-    const { onChange, entries } = this.props;
+    if (idx === -1) {
+      return;
+    }
+
+    const { entries } = this.props;
+
     const entriesArray = (entries instanceof Array)
       ? entries
       : Object.values(entries);
 
-    const entry = (idx === -1) ? null : entriesArray[idx];
+    const entry = entriesArray[idx];
 
-    onChange(entry);
+    this.handleOnChange(entry);
+    this.setState({ entry, open: false });
+  }
+
+  onBlur = () => {
+    window.setTimeout(() => {
+      const { entry } = this.state;
+
+      this.handleOnChange(entry);
+    }, 100);
   }
 
   onFocus = () => {
-    this.props.onChange(null);
+    const { entry } = this.props;
+
+    this.setState({ entry, open: true }, () => {
+      this.handleOnChange(null, true);
+    });
+  }
+
+  handleOnChange = (value, empty) => {
+    const { lastChangedValue } = this.state;
+
+    if (value !== lastChangedValue) {
+      this.setState({ lastChangedValue: value });
+      this.props.onChange(value, empty);
+    }
   }
 
 }

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

@@ -44,10 +44,24 @@ class InputAddress extends Component {
 
   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);
+    const isEmpty = (!inputValue || inputValue.length === 0);
+
+    this.setState({ isEmpty });
+  }
+
+  componentWillReceiveProps (newProps) {
+    const { value, text } = newProps;
+
+    if (value === this.props.value && text === this.props.text) {
+      return;
+    }
+
+    const inputValue = text || value;
+    const isEmpty = (!inputValue || inputValue.length === 0);
 
     this.setState({ isEmpty });
   }