diff --git a/src/selectors/account-selector-multi.js b/src/selectors/account-selector-multi.js index 67da388c8d..0663eaba67 100644 --- a/src/selectors/account-selector-multi.js +++ b/src/selectors/account-selector-multi.js @@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'; import BaseSelector from './base-selector'; import AccountSuggestionItemMulti from '../account/account-suggestion-multi'; import AccountNoMatch from '../account/account-nomatch'; -import {Account, Locale} from '../util/types'; +import {Account, Locale, KeyCodes} from '../util/types'; import {accountFilter} from '../filter/filters'; import StatusBar from '../suggestion/suggestion-list-status-bar'; import txt from '../i18n/i18n'; @@ -69,10 +69,18 @@ class AccountSelectorMulti extends React.Component { return null; } + onKeyDown(event) { + shouldHideSuggestions = event.shiftKey && event.which === KeyCodes.TAB; + } + + render() { const {noMatches, onAccountSelected, accounts} = this.props; return ( -
+
this.renderSuggestion(account)} renderNoMatches={() => } @@ -80,7 +88,6 @@ class AccountSelectorMulti extends React.Component { shouldHideSuggestionsOnSelect={false} shouldSelectHighlightedOnTab={false} shouldHideSuggestionOnBlur={false} - onTab={() => {shouldHideSuggestions = event.shiftKey;}} suggestionFilter={accountFilter} onSelect={onAccountSelected} onSuggestionListChange={(height) => { @@ -103,8 +110,8 @@ class AccountSelectorMulti extends React.Component { } AccountSelectorMulti.propTypes = { - onAccountSelected : PropTypes.func.isRequired, - accounts : PropTypes.arrayOf(Account), + onAccountSelected: PropTypes.func.isRequired, + accounts: PropTypes.arrayOf(Account), locale: Locale.isRequired, selectedAccounts: PropTypes.arrayOf(Account), noMatches: PropTypes.string, diff --git a/src/selectors/base-selector.js b/src/selectors/base-selector.js index a5cf59da0b..ec98b80136 100644 --- a/src/selectors/base-selector.js +++ b/src/selectors/base-selector.js @@ -58,9 +58,11 @@ class BaseSelector extends Component { } onInputChange(value) { - this.setState({showSuggestions : true, highlightedSuggestionIndex : -1}, () => { + this.setState({showSuggestions: true, highlightedSuggestionIndex: -1}, () => { this.props.onChange(value); - window.setTimeout(() => {this.props.onSuggestionListChange(this.getSuggestionListHeight());}); + window.setTimeout(() => { + this.props.onSuggestionListChange(this.getSuggestionListHeight()); + }); }); } @@ -70,24 +72,32 @@ class BaseSelector extends Component { return; } this.showHideSuggestions(true, this.props.onFocus); - window.setTimeout(() => {this.props.onSuggestionListChange(this.getSuggestionListHeight());}); + window.setTimeout(() => { + this.props.onSuggestionListChange(this.getSuggestionListHeight()); + }); } onBlur() { if (this.shouldPreventBlurForNextMouseClick) { this.input.focus(); - window.setTimeout(() => {this.props.onSuggestionListChange(this.getSuggestionListHeight());}); + window.setTimeout(() => { + this.props.onSuggestionListChange(this.getSuggestionListHeight()); + }); return; } if (this.props.shouldHideSuggestionOnBlur) { this.showHideSuggestions(false, () => { - window.setTimeout(() => {this.props.onSuggestionListChange(this.getSuggestionListHeight());}); + window.setTimeout(() => { + this.props.onSuggestionListChange(this.getSuggestionListHeight()); + }); this.props.onBlur(); }); return; } - window.setTimeout(() => {this.props.onSuggestionListChange(this.getSuggestionListHeight());}); + window.setTimeout(() => { + this.props.onSuggestionListChange(this.getSuggestionListHeight()); + }); this.props.onBlur(); } @@ -112,12 +122,16 @@ class BaseSelector extends Component { this.onInputReset(); } + onInputReset() { this.showHideSuggestions(false, this.props.onReset); - window.setTimeout(() => {this.props.onSuggestionListChange(this.getSuggestionListHeight());}); + window.setTimeout(() => { + this.props.onSuggestionListChange(this.getSuggestionListHeight()); + }); } - showHideSuggestions(show, cb = () => {}) { + showHideSuggestions(show, cb = () => { + }) { const nextState = show ? {showSuggestions: show} : {showSuggestions: false, highlightedSuggestionIndex: -1}; this.setState(nextState, cb); } @@ -160,7 +174,7 @@ class BaseSelector extends Component { onInputKeyDown(event) { const {showSuggestions, highlightedSuggestionIndex} = this.state; - const {shouldSelectHighlightedOnTab, onTab} = this.props; + const {shouldSelectHighlightedOnTab} = this.props; const {which, altKey} = event; switch (which) { case KeyCodes.DOWN : @@ -202,13 +216,12 @@ class BaseSelector extends Component { if (showSuggestions) { event.preventDefault(); } - this.onSuggestionSelect(suggestions[highlightedSuggestionIndex]); + this.onSuggestionSelect(this.filterSuggestions()[highlightedSuggestionIndex]); break; case KeyCodes.TAB: if (showSuggestions && shouldSelectHighlightedOnTab) { this.onSuggestionSelect(this.filterSuggestions()[highlightedSuggestionIndex]); } - onTab(event); } } @@ -269,9 +282,10 @@ BaseSelector.propTypes = { onBlur: PropTypes.func, onReset: PropTypes.func, onFocus: PropTypes.func, - placeholder : PropTypes.string, - ariaInvalid : PropTypes.bool, - suggestionsHeightMax : PropTypes.number, + onSuggestionListChange: PropTypes.func, //provides the height of the suggestion list + placeholder: PropTypes.string, + ariaInvalid: PropTypes.bool, + suggestionsHeightMax: PropTypes.number, }; BaseSelector.defaultProps = { @@ -279,8 +293,9 @@ BaseSelector.defaultProps = { onBlur: () => {}, onFocus: () => {}, onReset: () => {}, + onSuggestionListChange: () => {}, ariaInvalid: false, - placeholder : '', + placeholder: '', }; export default BaseSelector;