How to fix hover conflict and enter event in ReactJS autocomplete? - css

Question

As a means to learn, I am trying to build an autocomplete feature. I am following this example:
https://codesandbox.io/s/8lyp733pj0.
I see two issues with this solution:
1.) Conflict with mouse hover and keydown. If I use the keypad to navigate the list the active item gets highlighted and if I use my mouse at the same time another item will get highlighted. This results in 2 highlighted fields.
2.) If i select an item by pressing enter it will fill the input field with the selected text but if I press enter again it will change that text to the index 0 item I believe.
Can someone please help me in understanding how to resolve these issues. I have tried hover and focus for css but it still doesn't achieve the expected outcome.
My approach (not sure if this is the correct one):
If keyboard is being used then the mouse event should be disabled and vice versa.
I've also tried removing this.setState({activeSuggestion: 0}) for the enter event.
Thanks for your help - it's taking me some time to grasp the concepts of state with React.

Answer 1

The onKeyDown function updates correctly the value ofactiveSuggestion. I sugest you to add a scroll in the select when activeSuggestion is not vissible.
In my opinion, you need to update the value of activeSuggestion with theonMouseEnter function.
When you do that, remember to remove the line 32 from styles.css: .suggestions li:hover.
Only the element with .suggestion-active must have the active styles. Not the hovered ones. The idea is that onMouseEnter must update the value of activeSuggestion.
Here is the code:
// Autocomplete.jsx
//in line 84, after function onKeyDown, add:
onMouseEnter = e => {
try {
e.persist();
const currentIndex = parseInt(e.target.dataset.index, 10);
this.setState({ activeSuggestion: currentIndex });
} catch (reason) {
console.error(reason);
}
}
// then, create const onMouseEnter after the render() method:
render() {
const {
onChange,
onClick,
onKeyDown,
onMouseEnter,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
// In the li nodes (line 123), add props onMouseEnter and data-index:
<li
className={className}
key={suggestion}
onClick={onClick}
onMouseEnter={onMouseEnter}
data-index={index}
>
{suggestion}
</li>
Remember to remove the line 32 from styles.css: .suggestions li:hover.
Hope it helps.