Autocomplete keyboard mouse interaction

When entering data into the autocomplete control, if the mouse is positioned below the control when the results populate, whichever item is the mouse is under will appear to be selected. Hitting the Enter key will not select that item, even though it is highlighted. If you arrow down the item will be selected. I have verified this behavior in the demo.

This is confusing for the end user because it appears an item is selected. Is there a way to prevent this from happening?

I believe this is the hover state that you see.

It is different than the active state.

Its purpose of the hover state to indicate the user can click the item with the mouse to select it. There is no built-in way to disable it unless you override the default styling. The CSS variable --rz-dropdown-item-hover-background-color defines the global hover background for dropdown items (used also by RadzenAutoComplete).

1 Like

Yes, that is exactly it. Thank you for the quick response. Currently our active state and hover state colors are pretty similar. I think if I change the hover state color it will help.