on focus not working for first click

[ramprakash-ravi]

When ui-select is loaded in the page for the first time, it is disabled by default.
But after focusing on other input boxes and focusing on the ui-select it is working as expected.

My HTML:

<ui-select multiple ng-model="newMachine.machine_devices"> <ui-select-match> {{$item.Esn}} </ui-select-match> <ui-select-choices repeat="device in devices | filter:$select.search"> {{device.Esn}} </ui-select-choices> </ui-select>

js:
$scope.devices = [{DeviceID:1,Esn:'SCE112514000145182'},{DeviceID:2,Esn:'SCE112514000145185'}]

[Ampersandman]

Same problem here but for single select.
Focus on the input (ui-select-focusser) is only set after second click, either directly on the select or document.

[patrickhousley]

I am seeing a very similar issue. Running the latest version of angular-ui-select with angular 1.3.16 was working fine. However, after updating to angular 1.4.5, this issue started occurring. My issue differs slightly...when clicking the select the first time without any value set, the input gains focus. However, if the select already has a value or I click it a second time, the input never gains focus again until I click inside the input field or outside the select field, both of which cause the select to close.

[patrickhousley]

I think I found the issue....if I remove angular-animate 1.4.5 or 1.4.7, it works just fine.

[patrickhousley]

I just found another report of my problem and the fix: #859 (comment).

--edit--

Never mind, the issue @ramprakash-ravi describes is caused when using angular 1.4.4.

[hagis]

Input field is still not getting focus on first click when using ui-select 0.14.9, angular 1.4.5.

I hacked around this by turning off ALL animations when setting the input focus:

    387       var before = true;
    388       if (ctrl.$animate) {
    389           before = ctrl.$animate.enabled();
    390           ctrl.$animate.enabled(false);
    391       }
    392       $timeout(function () {
    393               ctrl.focusSearchInput(initSearchValue);
    394               if (ctrl.$animate) {
    395                   ctrl.$animate.enabled(before);
    396               }
    397 
    398           });

[patrickhousley]

I can not longer reproduce this issue. My plunker is here. Maybe you can fork it and modify it to your setup. If you are still having the issue, post the plunker back to me and I can take a look.

[hagis]

Could not instantly reproduce the problem either in the plunker. Will try again later.

[joonask]

Not focusing on first click. Reproduceble Plunker

[patrickhousley]

@joonask The problem is that you have no items to list out. Thats not to say this is not an issue with the library. However, given that no search value has been entered, users may expect an initial list of values. Try adding the below to the top of your search function.

if (!filterValue || filterValue === '') {
          return names; 
        }

[hagis]

@patrickhousley, we are using ui-select as a search box, so when the user types something, a backend search call gets made and results are shown. So initially the list of values is always empty.

Good catch on the event leak in your fix.