Assume that the user just has the mouse on the screen but is not using it. The user tries to add a tag that has at least one autocompletion suggestion. The user hits the enter key to add their tag (not any of the autocompletion suggestions) only to find one of the suggested autocompletion suggestions added.
This is because their mouse, which was still, was hovering over one of the autocompletion suggestions, making it be selected instead.
With quite a few operating systems (e.g. macOS), the mouse hides itself if the mouse is not in use and the user is using the keyboard (e.g. typing). So, it is highly confusing when a suggested tag is being focused and chosen instead of the typed tag as the mouse is not visible. Even if the mouse is visible, you usually only see such UI elements being focused on if there is at least a little mouse movement inside them.
My recommendation is to require mouse movement onto/within an autocompletion suggestion before providing it focus.
Although, I am unable to understand how this is implemented in vue-tags-input, there is a way to do this with mouse events in JS. The correct way is using onmousemove instead of onmouseenter or onmouseover. (This would be used in conjunction with onmouseleave to remove focus from the autocompletion suggestion when not hovering over the tag.)
Situation:
Assume that the user just has the mouse on the screen but is not using it. The user tries to add a tag that has at least one autocompletion suggestion. The user hits the enter key to add their tag (not any of the autocompletion suggestions) only to find one of the suggested autocompletion suggestions added.
This is because their mouse, which was still, was hovering over one of the autocompletion suggestions, making it be selected instead.
With quite a few operating systems (e.g. macOS), the mouse hides itself if the mouse is not in use and the user is using the keyboard (e.g. typing). So, it is highly confusing when a suggested tag is being focused and chosen instead of the typed tag as the mouse is not visible. Even if the mouse is visible, you usually only see such UI elements being focused on if there is at least a little mouse movement inside them.
My recommendation is to require mouse movement onto/within an autocompletion suggestion before providing it focus.
Although, I am unable to understand how this is implemented in vue-tags-input, there is a way to do this with mouse events in JS. The correct way is using
onmousemoveinstead ofonmouseenteroronmouseover. (This would be used in conjunction withonmouseleaveto remove focus from the autocompletion suggestion when not hovering over the tag.)