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..ada1176b6 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'; @@ -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); } }