Search code examples
angular-uiui-select

Angular-UI UI-Select Stop default behaviour of applying active class to first item


When options are initially displayed the first item has the active class applied.

To me this makes good sense if search is not toggled, although if the intention is for users to primarily use the search functionality, applying the active class seems clunky – particularly if you are using grouped items and applying custom styles to the drop down content.

The ability to navigate through the items with arrow keys is still desirable, but should only appear when the user initiates.

It does not seem any means to stop this default behaviour exists, I'm simply looking for a way to have an initial state of no active item.


Solution

  • I had a similar need and I simply set $select.activeIndex = -1 on focus of the primary element. This stopped the default behavior of the active class being set when the dropdown is loaded