Autocomplete suggestion focus outline

[liamcmitchell]

Give autocomplete suggestion a visible focus outline to differentiate from hovered suggestion.

I got confused when searching with keyboard and my mouse was hovered over the suggestions.

Before:

After:

[josevalim]

Given many will use the keyboard, I wonder if we could have something more subtle? Perhaps a darker bg (on dark mode) for the mouse over one compared to the selected one?

[liamcmitchell]

Not sure what you mean by more subtle.

I think the hover style is fine on it's own. I wouldn't make it more subtle.

The focus indicator is similar to other elements:

I didn't notice that before and IMO they should be aligned - 2px instead of just 1px, visible keyboard focus is important.

Right now focus re-uses the hover style which is where the problem comes from. Focus and hover are independent states. An element can be both, either or none.

Maybe you want to differentiate more between hover and focus, so separate the hover style from focus?

[liamcmitchell]

Another thought is to only show hover styles if a mouse has moved over the suggestions but I don't think it needs to be that complicated. Having two distinct styles for hover and focus is enough for me.

[josevalim]

What if we go with GitHub's style and we only use the inset on the left? See the blue accent on the left in the screenshot below:

[liamcmitchell]

Works for me.

Screen.Recording.2024-12-30.at.13.55.43.mov

[josevalim]

GORGEOUS.

[josevalim]

@liamcmitchell just one check. We only need the inset now, no? We no longer need the different background color?

[liamcmitchell]

I added a different background color for the selected state, matching GH. I think it's nice to have.

[josevalim]

💚 💙 💜 💛 ❤️