Angular ui-select needs clicking twice to enter the input

Question

Am fairly new to angular and I have an ui-select which fetches the data from remote service upon typing anything shows the related items in dropdown. It is a single select dropdown. The problem is the input field requires two clicks to open. On first click the field gets focused and upon second click the cursor is present for typing.

Not able to get what is causing the issue.

     <ui-select  ng-model="page.model.form.relatedItem"  theme="bootstrap">
          <ui-select-match placeholder="Search ...">
             <span ng-if="$select.selected.name" nbind="$select.selected.name"></span>
             <span ng-if="!$select.selected.name" ng-bind="page.model.form.relatedItem.name"></span>
          </ui-select-match>
         <ui-select-choices refresh="page.getRelatedItemList($select.search)" refresh-delay="0" group-by="'group'"  repeat="item in page.itemArray | filter: $select.search">
           <span ng-bind-html="item.name | highlight: $select.search"></span>
         </ui-select-choices>
    </ui-select>

Thanks for any help.

Answer 1

This is a known issue with the ui-select library for angularJs.

The problem is related to ngAnimate and the ui-select component. If ngAnimate is removed from the app, the problem will disappear. There are also a couple of workarounds if removing ngAnimate is not an option for you.

One workaround is to add a prevent-animations directive to the ui-select elements. Simplified code example follows:

<ui-select prevent-animations>
    <ui-select-match prevent-animations>{{$item.title}}</ui-select-match>
    <ui-select-choices prevent-animations>
    ...
    </ui-select-choices>

Another suggested workaround in is to use a delay to add focus to the search field after component activation. Although the github issue referenced has been marked as closed, there are other open issues citing the same problem, and unfortunately this project is is now marked as archived, so don't wait for any fixes to appear there!