Merge pull request #3427 from ethcore/ng-address-input-improv

Scrollable accounts in autocomplete

js/src/dapps/basiccoin/AddressSelect/addressSelect.css

@@ -21,3 +21,7 @@
 .iconMenu option {
   padding-left: 30px;
 }
+
+.menu {
+  display: none;
+}

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

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import keycode from 'keycode';
 import { MenuItem, AutoComplete as MUIAutoComplete } from 'material-ui';
 import { PopoverAnimationVertical } from 'material-ui/Popover';
 
@@ -40,7 +41,8 @@ export default class AutoComplete extends Component {
   state = {
     lastChangedValue: undefined,
     entry: null,
-    open: false
+    open: false,
+    fakeBlur: false
   }
 
   render () {
@@ -67,6 +69,9 @@ export default class AutoComplete extends Component {
         fullWidth
         floatingLabelFixed
         dataSource={ this.getDataSource() }
+        menuProps={ { maxHeight: 400 } }
+        ref='muiAutocomplete'
+        onKeyDown={ this.onKeyDown }
       />
     );
   }
@@ -91,6 +96,30 @@ export default class AutoComplete extends Component {
     }));
   }
 
+  onKeyDown = (event) => {
+    const { muiAutocomplete } = this.refs;
+
+    switch (keycode(event)) {
+      case 'down':
+        const { menu } = muiAutocomplete.refs;
+        menu.handleKeyDown(event);
+        this.setState({ fakeBlur: true });
+        break;
+
+      case 'enter':
+      case 'tab':
+        event.preventDefault();
+        event.stopPropagation();
+        event.which = 'useless';
+
+        const e = new CustomEvent('down');
+        e.which = 40;
+
+        muiAutocomplete.handleKeyDown(e);
+        break;
+    }
+  }
+
   onChange = (item, idx) => {
     if (idx === -1) {
       return;
@@ -108,17 +137,22 @@ export default class AutoComplete extends Component {
     this.setState({ entry, open: false });
   }
 
-  onBlur = () => {
+  onBlur = (event) => {
     const { onUpdateInput } = this.props;
 
-    // TODO: Handle blur gracefully where we use onUpdateInput (currently replaces input
+    // TODO: Handle blur gracefully where we use onUpdateInput (currently replaces
     // input where text is allowed with the last selected value from the dropdown)
     if (!onUpdateInput) {
       window.setTimeout(() => {
-        const { entry } = this.state;
+        const { entry, fakeBlur } = this.state;
+
+        if (fakeBlur) {
+          this.setState({ fakeBlur: false });
+          return;
+        }
 
         this.handleOnChange(entry);
-      }, 100);
+      }, 200);
     }
   }