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

Question

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.

Did you find any workaround for this? – Majid Jul 02 '18 at 08:19 — Majid, Jul 02 '18 at 08:19

score 1 · Accepted Answer · answered Feb 02 '17 at 21:26

1

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

answered Feb 02 '17 at 21:26

Jason P

66
3

Sounds perfect, thanks for the suggestion, will give it a go and report back. – luckyape Feb 02 '17 at 21:34

score 1 · Answer 2 · answered Dec 26 '18 at 20:36

I was able to remove the active class from the first item in the dropdown using the uis-open-close attribute on the parent element.

define the attribute in the template:

<ui-select theme="selectize" uis-open-close="$ctrl.setActiveIndex($select)">

Then in the controller set the activeIndex to -1:

setActiveIndex($select) {
    $timeout(() => {
        if($select.selected === undefined) {
            $select.activeIndex = -1;
        }
    }, 25);
}

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

2 Answers2