From 7750d593058ae8dbbba9c81ce04cba2e13ee0c60 Mon Sep 17 00:00:00 2001 From: Egor Sapronov Date: Wed, 30 Dec 2015 13:44:19 +0600 Subject: [PATCH] [added] select item on arrow right key down --- lib/Autocomplete.js | 63 +++++++++++++++++++++++++-------------------- 1 file changed, 35 insertions(+), 28 deletions(-) diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js index daceb0ed..f81532e7 100644 --- a/lib/Autocomplete.js +++ b/lib/Autocomplete.js @@ -131,34 +131,12 @@ let Autocomplete = React.createClass({ }) }, + ArrowRight (event) { + this.selectItemFromKeyEvent(event) + }, + Enter (event) { - if (this.state.isOpen === false) { - // already selected this, do nothing - return - } - else if (this.state.highlightedIndex == null) { - // hit enter after focus but before typing anything so no autocomplete attempt yet - this.setState({ - isOpen: false - }, () => { - React.findDOMNode(this.refs.input).select() - }) - } - else { - var item = this.getFilteredItems()[this.state.highlightedIndex] - this.setState({ - value: this.props.getItemValue(item), - isOpen: false, - highlightedIndex: null - }, () => { - //React.findDOMNode(this.refs.input).focus() // TODO: file issue - React.findDOMNode(this.refs.input).setSelectionRange( - this.state.value.length, - this.state.value.length - ) - this.props.onSelect(this.state.value, item) - }) - } + this.selectItemFromKeyEvent(event) }, Escape (event) { @@ -243,6 +221,36 @@ let Autocomplete = React.createClass({ }) }, + selectItemFromKeyEvent (event) { + if (this.state.isOpen === false) { + // already selected this, do nothing + return + } + else if (this.state.highlightedIndex == null) { + // hit enter after focus but before typing anything so no autocomplete attempt yet + this.setState({ + isOpen: false + }, () => { + React.findDOMNode(this.refs.input).select() + }) + } + else { + var item = this.getFilteredItems()[this.state.highlightedIndex] + this.setState({ + value: this.props.getItemValue(item), + isOpen: false, + highlightedIndex: null + }, () => { + //React.findDOMNode(this.refs.input).focus() // TODO: file issue + React.findDOMNode(this.refs.input).setSelectionRange( + this.state.value.length, + this.state.value.length + ) + this.props.onSelect(this.state.value, item) + }) + } + }, + setIgnoreBlur (ignore) { this._ignoreBlur = ignore }, @@ -324,4 +332,3 @@ let Autocomplete = React.createClass({ }) module.exports = Autocomplete -