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 . 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;