- handleKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
- const { onCreate = noop } = this.props;
- if (key === 'Enter' && this.props.value.length > 0) {
- onCreate();
+ handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+ const { onCreate = noop, onSelect = noop, suggestions = [] } = this.props;
+ const { selectedSuggestionIndex } = this.state;
+ if (event.key === 'Enter') {
+ if (this.isSuggestionBoxOpen() && selectedSuggestionIndex < suggestions.length) {
+ // prevent form submissions when selecting a suggestion
+ event.preventDefault();
+ onSelect(suggestions[selectedSuggestionIndex]);
+ } else if (this.props.value.length > 0) {
+ onCreate();
+ }
+ }
+ }
+
+ handleNavigationKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
+ if (key === 'ArrowUp') {
+ this.updateSelectedSuggestionIndex(-1);
+ } else if (key === 'ArrowDown') {
+ this.updateSelectedSuggestionIndex(1);