Possible to get incorrect focus styling

[edwardhorsford]

There seem to be cases where the input is focused, but it does not get the regular focus styling.

Video of me repeatedly clicking the label:

If I set the main input to focused in the web-inspector, there's no focus styles - so I presume the yellow focus border is normally handled by something else.

I see that when the correct yellow border is applied, it has the class autocomplete__input--focused. So it seems it's possible for this class to be missing whilst the input is focused.

Is there a downside to giving focus styling directly to this input? I worry that it doesn't have it for a good reason. Else should we be adding this class more liberally?

This is minor issue for us as we've added something to work around not being able to click the arrow (#202) and a clear button to clear results (#240), both of which focus the input when they're done - but with the wrong focus styling.

[tvararu]

There is no downside to giving focus styling directly to the input as you say, please feel free. :)

The --focused styling was decoupled from native browser :focus when the feature was added that allows users to type while their native focus is on one of the options: https://github.com/alphagov/accessible-autocomplete/pull/47/files#diff-2f546331b83a0bc3957cc705848598dfR27. In hindsight this was purposeful to bring attention to the fact that native :focus is not always the cause of the input looking like it's focused, but it wasn't absolutely necessary and introduces bugs like this one.

I think this is a bug that can be fixed by updating the CSS rule to target .autocomplete__input--focused, .autocomplete__input:focus, { ... }, there shouldn't be a downside to this.