diff --git a/src/components/Autocomplete/Autocomplete.react.js b/src/components/Autocomplete/Autocomplete.react.js index 6e0647baa..9e28d5b80 100644 --- a/src/components/Autocomplete/Autocomplete.react.js +++ b/src/components/Autocomplete/Autocomplete.react.js @@ -63,6 +63,11 @@ export default class Autocomplete extends Component { this.recalculatePosition(); this._ignoreBlur = false; this._suggestionClicked = false; + if(this.props.autoFocus){ + setTimeout(() => { + this.inputRef.current.focus(); + }, 0); + } } componentWillUnmount() { @@ -246,27 +251,17 @@ export default class Autocomplete extends Component { onKeyDown(e) { const { activeSuggestion, filteredSuggestions } = this.state; - // Enter - const { userInput } = this.state; - - if (e.keyCode === 13) { - if (userInput && userInput.length > 0) { - this.props.onSubmit(userInput); - } - } else if (e.keyCode === 9) { - // Tab - // do not type it - e.preventDefault(); - - e.stopPropagation(); - // move focus to input - this.inputRef.current.focus(); + if (e.keyCode === 13 || e.key === 'Enter') { this.setState({ active: true, activeSuggestion: 0, showSuggestions: false, userInput: filteredSuggestions[activeSuggestion] }); + } else if (e.keyCode === 9) { + this.setState({ + showSuggestions: false, + }); } else if (e.keyCode === 38) { // arrow up if (activeSuggestion === 0) { @@ -279,7 +274,7 @@ export default class Autocomplete extends Component { }); } else if (e.keyCode === 40) { // arrow down - if (activeSuggestion - 1 === filteredSuggestions.length) { + if (activeSuggestion === filteredSuggestions.length - 1) { return; } @@ -341,6 +336,7 @@ export default class Autocomplete extends Component { activeSuggestion={activeSuggestion} onClick={onClick} onMouseDown={onMouseDown} + onKeyDown={onKeyDown} /> ); } @@ -351,7 +347,7 @@ export default class Autocomplete extends Component { { let setFocus = useCallback((input) => { @@ -136,6 +137,7 @@ let FilterRow = ({ onChange={onChangeField} buildSuggestions={buildSuggestions} buildLabel={() => ''} + autoFocus={autoFocus} /> +
{content}
); diff --git a/src/components/Filter/Filter.react.js b/src/components/Filter/Filter.react.js index d7bfd75e2..47c2ca104 100644 --- a/src/components/Filter/Filter.react.js +++ b/src/components/Filter/Filter.react.js @@ -112,6 +112,7 @@ let Filter = ({ schema, filters, renderRow, onChange, onSearch, blacklist, class currentConstraint: constraint, compareTo, key: field + '-' + constraint + '-' + i, + autoFocus: i === 0, onChangeField: newField => { onChange(changeField(schema, filters, i, newField)); diff --git a/src/components/SuggestionsList/SuggestionsList.react.js b/src/components/SuggestionsList/SuggestionsList.react.js index b2db0777c..5b11b895c 100644 --- a/src/components/SuggestionsList/SuggestionsList.react.js +++ b/src/components/SuggestionsList/SuggestionsList.react.js @@ -43,7 +43,8 @@ export default class Suggestion extends React.Component { suggestionsItemStyle, activeSuggestion, onClick, - onMouseDown} = this.props; + onMouseDown, + onKeyDown} = this.props; return ( -