reactjs / react-autocomplete

WAI-ARIA compliant React autocomplete (combobox) component
MIT License
2.17k stars 532 forks source link

Update value when select an item by arrows #329

Open AlexandrAnash opened 6 years ago

AlexandrAnash commented 6 years ago

Can I make it possible to update, conditionally "event.target.value" when I select an item by arrows? For example when i typing word "hello" and press down or up, I see selected item in search input and can continue typing already with new value "hellow world"

ezgif com-video-to-gif

AlexandrAnash commented 6 years ago

For implementation, I would made a subscription onKeyDown. And would make in here setValue for changes value in input. For example:

const handleKeyDown = (props) => (event) => {
  if (autocompleteRef && (event.key === ARROW_DOWN || event.key === ARROW_UP)) {
    if (autocompleteRef.state.highlightedIndex !== null) {
      const item = props.items[autocompleteRef.state.highlightedIndex];
      if (item.text) {
        props.setValue(item.text);
      }
    }
  }
};

But I do not know "highlightedIndex" which is placed async https://github.com/reactjs/react-autocomplete/blob/master/lib/Autocomplete.js#L295

    this.setState({
      highlightedIndex: index,
      isOpen: true
    });

And use "autocompleteRef.state.highlightedIndex" seems a bad practice... Can I do it somehow beautifully?