react-autocomplete
react-autocomplete copied to clipboard
Update value when select an item by arrows
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"
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?