Add class to input when dropdown is active

[AlecRust]

I'm working with inputs that have a border radius:

And when the results are open I'd like to remove the bottom border radius from the input, to achieve:

However, there doesn't seem to be a class on the input when the results panel is open for me to do this.

The aria-expanded attribute does change when the results panel has results, so I can do this:

.autocomplete__input[aria-expanded=true] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

But not when the panel is open for the "no results" message. So it only half works:

This seems like a pretty common use case that could warrant adding a class for? Or perhaps aria-expanded should be set to true when the results panel is expanded showing "No results"?

[NickColley]

Hello @AlecRust ,

Thanks for raising this.

It seems like the aria-expanded state should be consistent when showing 'no results', but I would need to properly think this through and test this.

We're primarily focused on supporting users of government since we have limited time as a team.

If you want to contribute this fix you're welcome to raise a pull request and we can review it when we get the time, thanks for your patience. 👍

[dilrajahdan]

+1 This would be super helpful. I'm having this same issue right now.

[iandunn]

I think it'd be helpful to add the class to .autocomplete__wrapper, so that other elements could be styled too.