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] 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 ddfd334e8..818906708 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 b0958da31..89cc5ee16 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;