From ecb89d3670fffc932bdeb6867b9d55e8243dcafb Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Mon, 14 Nov 2016 15:35:25 +0100
Subject: [PATCH 1/2] Scrollable Accounts list // Tab;Enter;Keydown for first
 input #3396

---
 .../basiccoin/AddressSelect/addressSelect.css |  4 +++
 js/src/ui/Form/AutoComplete/autocomplete.js   | 27 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/js/src/dapps/basiccoin/AddressSelect/addressSelect.css b/js/src/dapps/basiccoin/AddressSelect/addressSelect.css
index ddfd334e8bd..818906708a9 100644
--- a/js/src/dapps/basiccoin/AddressSelect/addressSelect.css
+++ b/js/src/dapps/basiccoin/AddressSelect/addressSelect.css
@@ -21,3 +21,7 @@
 .iconMenu option {
   padding-left: 30px;
 }
+
+.menu {
+  display: none;
+}
diff --git a/js/src/ui/Form/AutoComplete/autocomplete.js b/js/src/ui/Form/AutoComplete/autocomplete.js
index b0958da3146..89cc5ee160d 100644
--- a/js/src/ui/Form/AutoComplete/autocomplete.js
+++ b/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';
 
@@ -67,6 +68,9 @@ export default class AutoComplete extends Component {
         fullWidth
         floatingLabelFixed
         dataSource={ this.getDataSource() }
+        menuProps={ { maxHeight: 400 } }
+        ref='muiAutocomplete'
+        onKeyDown={ this.onKeyDown }
       />
     );
   }
@@ -91,6 +95,29 @@ export default class AutoComplete extends Component {
     }));
   }
 
+  onKeyDown = (event) => {
+    const { muiAutocomplete } = this.refs;
+
+    switch (keycode(event)) {
+      case 'down':
+        const { menu } = muiAutocomplete.refs;
+        menu.handleKeyDown(event);
+        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;

From 89f83b8cd7974df78f5b1734a03192a879b1aad2 Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Mon, 14 Nov 2016 16:11:00 +0100
Subject: [PATCH 2/2] Fixes #3397 : fake blur handled

---
 js/src/ui/Form/AutoComplete/autocomplete.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/js/src/ui/Form/AutoComplete/autocomplete.js b/js/src/ui/Form/AutoComplete/autocomplete.js
index 89cc5ee160d..ada1176b667 100644
--- a/js/src/ui/Form/AutoComplete/autocomplete.js
+++ b/js/src/ui/Form/AutoComplete/autocomplete.js
@@ -41,7 +41,8 @@ export default class AutoComplete extends Component {
   state = {
     lastChangedValue: undefined,
     entry: null,
-    open: false
+    open: false,
+    fakeBlur: false
   }
 
   render () {
@@ -102,6 +103,7 @@ export default class AutoComplete extends Component {
       case 'down':
         const { menu } = muiAutocomplete.refs;
         menu.handleKeyDown(event);
+        this.setState({ fakeBlur: true });
         break;
 
       case 'enter':
@@ -135,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);
     }
   }