Issue with ui-select when using Angular 1.4.5 and ngAnimate 1.4.5

[iamvenkat45]

UI-Select not working well when upgraded to Angular 1.4.5 and angular-animate 1.4.5.

I am having an issue when searching an item in the input box from the list of items.
Please open the below attached plunker for Issue.
http://plnkr.co/edit/0gm8cxi10eVVbdiohJ3g?p=preview

Steps to find the issue.

1. Select an item from the dropdown (or) type/search an item from the dropdown.
   This works good for the first time
2. Try to Type/Search an item again.
   Now we are not able to type/search it again from the input box.

This is issue appears only when using angular 1.4.5 and angular-animate 1.4.5 and above.

Here is the another plunker works well with angular 1.4.5 and angular-animate 1.4.4
http://plnkr.co/edit/KgkotM5ckNyeLmxEqPOc?p=preview

Thanks

[PhilFlash]

+1
Same problem with angular 1.4.6 and angular-animate 1.4.6

[karthilxg]

I too face the same focus issue with 1.4.6 & 1.4.5 angular-animate, but downgrading to angular-animate to 1.4.4 works fine.

[strizzaflex]

Yeah I just ran into this as well in a bug that was reported. when you select the select it is putting focus into the body element. So you are scrolling the body. Not sure why this is happening but the focus would seem to be the issue but how that is happening I'm not sure yet. This needs to be a priority as it's a compatibility issue with future 1.x angular.... Or this is an angular bug. Either way it would be nice to know.

[Flightfreak]

We've experienced something similar; i was able to 'fix it' with an additional directive that waits for a little longer before setting the focus.

utilDirectives.directive('uiSelectFocusInput', function($timeout){
    return {
        require: 'ui-select',
        link: function (scope, $element, $attributes, selectController) {

            scope.$on('uis:activate',function(){
                // Give it time to appear before focus
                $timeout(function(){
                    scope.$select.searchInput[0].focus();
                },500);
            });
        }
    }
});

<ui-select search-enabled ui-select-focus-input ng-model="resource" ng-disabled="loader">
    <ui-select-match placeholder="Search resource...">{{$select.selected.label}}</ui-select-match>
        <ui-select-choices repeat="item in preload.resource|filter:{label:$select.search}">
        <div ng-bind-html="item.label | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

[webskin]

Thank you @Flightfreak.
Worked for angularjs / animate 1.4.6

[igorlino]

Experiencing the same issue (angular >= 1.4.5 )

[igorlino]

@Flightfreak thanks for the workaround

I have improved it a bit, because the 500 is way to long for typing. You will probably loose 1-3 keys when the select is in autofocus mode and ready for typing. Its only a workaround.

scope.$on('uis:activate', function () {
    $timeout(focusSearchInput, 0);
    $timeout(focusSearchInput, 100);
    $timeout(focusSearchInput, 200);
});

function focusSearchInput() {
    scope.$select.searchInput[0].focus();
}

[Flightfreak]

thx!

I've noticed the whole issue is very dependent on the processing power of the client machine. Only slower clients seem to experience the focus issues. Seems to depend on the speed the animations library is loaded and processed.

[spooky]

Same problem, solved by disabling ng-animate on the widget. I configured the provider with:

$animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/)

then used ng-animate-disabled class on the ui-select directive.

Same problem here on angular and angular-animate 1.4.7.

Downgraded angular-animate to 1.4.4 until this gets fixed.

[wautersj]

I confirm this isn't resolved in version 1.4.8

[nicooga]

@spooky your solution doesn't work work for me. I'm using the ui-select inside a directive template, used by another directive template. Would it have something to do?

I resorted to tucking an $animate.enabled(element, false) in the directive definition.