Select a value from dropdown using React

Question

I am making a very simple autocomplete section in a react application.

Code as follows,

index.js

import React from 'react';
import { render } from 'react-dom';
import Autocomplete from './Autocomplete';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'left',
};

const items = ['Moscow', 'Ufa', 'Tver', 'Alma ata'];

function onAutoCompleteHandle(val) {
  alert(val);
}

const App = () => (
  <div style={styles}>
    <Autocomplete items={items} onAutocomplete={onAutoCompleteHandle.bind(this)}/>
  </div>
);

render(<App />, document.getElementById('root'));

autocomplete.js

Render method:

const showSuggest = {
      display: this.state.show ? 'block' : 'none',
    }
    return (
      <div>
      <input type="text" 
        className="autoCompleteInput"
        onChange={this.handleChange}
        ref={input => { this.textInput = input; }} 
        onClick={this.handleClick}
        onKeyPress={this.handleKeyPress}
      />
      <span className='suggestWrapper' style={showSuggest}>
          <ul className='suggestAutocomplete'>
          {this.state.items.map((item, i) => {
            return 
            <li key={i} onClick={this.selectSuggestion}>
              {item}
            </li>
          })}
        </ul>
      </span>
      </div>
    )

Complete working example: https://codesandbox.io/s/react-autocomplete-nbo3n

Steps to reproduce in the above given sandbox example:

-> Click on the input box.

-> Enter single alphabet eg.., a .

-> This gives the two items as result Ufa , Alma ata .

-> Press the down arrow key in keyboard.

As nothing happens here, unable to select any of the dropdown items.

As of now things work only if we move the mouse over the dropdown and select any item but I am in the need to implement the same behaviour for key down and enter.

Expected behaviour:

-> On keydown/keyup should be able to navigate the dropdown list items.

-> On click enter key on an item then that item should be the selected one.

I have tried assigning ref={input => { this.textInput = input; }} ref={input => { this.textInput = input; }} to the ul list items suggestAutocomplete but that also doesn't help..

Really I am stuck with this for very very long time. I humbly request you to consider this question.

It is also okay if you change this existing code, but I need to have both mouse selection and keyboard selection as well in the autocomplete..

Answer 1

1. Initialize a state with value -1

2. Add an event on keyDown

something like this:

handleKeyDown(e) {
  if (e.keyCode == 40) { //down
    this.setState({active: ++this.state.active})
  } else if (e.keyCode == 38) { //up
    this.setState({active: --this.state.active})
  } else if (e.keyCode == 13) { //enter
    e.preventDefault();
    if (this.state.active > -1) {
      this.selectSuggestion();
    }
  }
};

3. On click, reset the state to -1 again.

Check this: https://codesandbox.io/s/react-autocomplete-cf2yd