Bug: Option gets selected by mouse cursor position, not current item

[AgentSmith0]

If you use the arrow keys to select an item from the dropdown and click enter, the option won't get selected. Instead, the option under the mouse cursor position gets selected. This is a weird behavior...

[lekoala]

i'm not sure i get the issue,

this is what i have, it's selecting properly the highlighted option if i press enter

Tab-1719087826188.mp4

[AgentSmith0]

Yeah, this works as expected, but when you move the cursor (could be just accidentally) after having selected an option by keyboard, the selection gets changed unexpectedly...

[lekoala]

mhh yes, but i don't see how it could be otherwise. when you use the keyboard, that's what define the focus. if you move the mouse, it's going to select whatever you are hovering. You need to move it enough that it goes to another option to get the focus, so that's not a "small" move, it's already big enough to select another item.

do you know of any other library that does thing differently ? :-) i'm open to suggestions but i'd like to see how that's handled in other projects

[AgentSmith0]

Have a look at this example: https://mdbootstrap.com/docs/standard/forms/autocomplete/
I think just moving the mouse shouldn't select another option, only when clicking an option it should be selected. Then the keyboard selection would work properly, even when you move your mouse around...

[lekoala]

mhh i see yes

i don't know if i'm super happy with the fact it can mean you have two items highlighted

for example three and five but i see what you mean

[lekoala]

soo.... decoupling the focus/selection is not always great

for example, i can hover things with the mouse, but then it's not "selected". this means, when using the keyboard, the navigation will start from the top (the first option). This also means that after using the keyboard, if I scroll down, i see the option hovered, but I have no idea anymore what's really selected and pressing enter will lead to the last selected entry...

I'm not sure that's great either, and honestly, I don't expect anyone to use the keyboard to select something, THEN move the mouse, AND expecting the input to keep track of whatever was keyboard selected

example below

Bootstrap-5-autocomplete-demo.mp4

unless you have a very good reasoning against this, i'm not going forward with this

[AgentSmith0]

@lekoala Well ok, lets leave this behavior as is for now. But another problem I have is that when my cursor is positioned under the input field and I enter some text and want to submit the entered text by pressing the enter key, the option under the cursor gets selected. This behavior is weird and people expect the entered text to be submitted (compared to autocomplete from search engines etc.). Is there a way to change this?

[lekoala]

that seems reasonable :)

5563882

can you give it a try?

[AgentSmith0]

@lekoala Thanks, this works fine now...

[lekoala]

and published ;-)