search box not always in focus with nganimate

[lebster]

When I click a drop down with search it does not always make the texbox in focus. If i remove nganimate from the project everything works okay.

I have found that increasing the timeout on line 316 in select.js to 100 it makes it work consistently (see below). I just don't feel comfortable doing this though. Is this problem ui-select or nganimate?

  $timeout(function() {
    ctrl.search = initSearchValue || ctrl.search;
    ctrl.searchInput[0].focus();
  },100);

http://plnkr.co/edit/PtJ6Qt647svaj5ltOJCq?p=preview

[lebster]

#278

[lebster]

[lebster]

This does not seem to happen with angularjs & nganimate 1.4.x

[TheYves]

+1

[RavenHursT]

+1 seeing the same problem. More info:

It appears to only manifest, as @lebster pointed out, when ngAnimate is included in the app (not actually used, but just included). When utilizing the Selectize theme, it doesn't seem to happen when an option on a given select hasn't been chosen yet. But once an option has been chosen, we start seeing the bug manifest (see link to video screen capture below).

In my plunker (link below), I've added a console log on line 331 to check the :visible css pseudo property on the input that we're trying to focus. If you watch the console, the bug manifests when the input's ng-show hasn't had time to change the display property on the element.

Not sure what the solution is here. Is there some kind of event that is fired by the element to let us know when it's become visible and then only fire the .focus() after that point?

@cdjackson or @crearc, you guys seem to be some of the more active members on this project. Do you have any input here?

Screen capture: https://drive.google.com/a/captora.com/file/d/0B0k5It7W8m7jQTdBekwtQUNXZU0/view?usp=sharing

Plunker: http://plnkr.co/edit/CTUEW0?p=preview

[RavenHursT]

Ok.. figured out why, in the Selectize theme, the bug doesn't manifest until something is selected. It's simply because the empty input is always shown when !$select.selected so when you click on the dropdown, you're clicking on the input so the focus is enabled by the default click event. But once an item is selected, we still have the issue above.

[RavenHursT]

One possibility (not a good one IMHO) could be to long-poll the element for :visible https://github.com/shaunbowe/jquery.visibilityChanged/blob/master/visibilityChanged.js

Still researching to see if there's some other way to detect when ngAnimate is done showing the element.

[RavenHursT]

Looks like ngHide is invoking $animate irregardless of whether or not ngAnimate is being used by the app: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js#L332

Which is REALLY odd to me. Not sure how $animate is even available as a DI value when the module isn't being included.. Angular must being doing some kind of noop functionality for apps that aren't using ngAnimate.

[RavenHursT]

Ok.. so we think we've found a solution that waits $animate to do it's thing if and when it's enabled on the given app.

Here's a plunker to see it in action: http://plnkr.co/edit/j5X145?p=preview

We'll be pointing our bower.json at our fork for now (https://github.com/CaptoraInc/ui-select), but would love to see this merged so that we can continue to reference the main project.

[eloone]

I have had the exact same problem, when I include ngAnimate in the app, after the first selection the input doesn't focus and we can't type because the focus event is applied before the input is visible. This is because of ngHide. To fix I created a directive like so:

app.directive('fixFocusUiSelect', ['$animate', function($animate){
      return {
         restrict: 'A',
         require: 'uiSelect',
         link: function(scope, elt, attrs, $select){
            $animate.on('removeClass', $select.searchInput[0], function(input) {
               input.focus();
            });

            scope.$on('$destroy', function(){
               $animate.off('removeClass', $select.searchInput[0]);
            });
         }
      };
   }])

And in html:

<ui-select fix-focus-ui-select>...</ui-select>

This fixed the problem for me. Thanks to the preceding comment for giving solution pointers. (However the plunkr doesn't show the problem, when I open it it works fine...)

[patrickhousley]

The plunkr @RavenHursT linked works perfectly. Is this going to be merged in?

--edit--

Never mind, sorry.

The plunkr @RavenHursT linked does not work with angular 1.4.5.

angular 1.4.4 causes issue described in #1253 where the input is not focused the first time the drop down is opened.

angular 1.4.5 causes the issue described in this post.

[patrickhousley]

Issue is corrected in the below plunker. I will do a pull request maybe tomorrow.

http://plnkr.co/edit/G02EbD

[thoughtspacewebsites]

@dimirc Any chance of this being pulled into core? I'm experiencing this issue on a production project and would prefer to not have to modify my personal copy so I can keep up with updates...

[maxhan]

Me as well.

[RavenHursT]

lol.. this is still waiting for a merge? wow.

[thoughtspacewebsites]

I actually tested it on my end yesterday and it seems to be throwing some errors in console despite the fact that it seems to work...

[patrickhousley]

@thoughtspacewebsites can you provide the errors

[thoughtspacewebsites]

@patrickhousley Angular 1.4.7, on occasion I get this error:

[13930:1210/100212:INFO:CONSOLE(107)] ""Error: [ui.select:choices] http://errors.angularjs.org/1.4.7/ui.select/choices?p0=Expected%20multiple%20.ui-select-choices-row%20but%20got%20'%7B0%7D'.&p1=0\n at file:///Users/me/Development/maple-angular/lib/ui-select/select.min.js:7:2272\n at h (file:///Users/me/Development/maple-angular/lib/ui-select/select.min.js:7:5640)\n at g.focusSearchInput (file:///Users/me/Development/maple-angular/lib/ui-select/select.min.js:7:7397)\n at file:///Users/me/Development/maple-angular/lib/ui-select/select.min.js:7:7215\n at file:///Users/me/Development/maple-angular/lib/angular.js:146:222\n at e (file:///Users/me/Development/maple-angular/lib/angular.js:43:95)\n at file:///Users/me/Development/maple-angular/lib/angular.js:45:491"", source: file:///Users/me/Development/maple-angular/lib/angular.js (107)

Doesn't happen if the search input is blank, but occasionally happens when I type somme content in and unfocus the input without selecting anything.

[thoughtspacewebsites]

Like I said, everything seems to work as expected, but my console gets flooded with these errors.

[patrickhousley]

Can you put together a plunkr? I cannot reproduce the issue in my production system.

[thoughtspacewebsites]

Are you testing with Angular 1.4.7?

[thoughtspacewebsites]

Here's a dumbed down version of my code:

http://plnkr.co/edit/0Y1cTegkUv45nWvi3KEF?p=preview

Never really used Plunker much, so I'm not sure how to check for errors, etc... Also, I don't think this should matter at all, but my code is within the context of a NWJS app:

http://nwjs.io

But NWJS uses Chromium, so I wouldn't think anything would show up there that wouldn't also appear in Chrome... Or maybe I just sound uneducated :)

[patrickhousley]

Honestly, I have tried the plunkr in chrome and in a chromium os vmware image and still cannot reproduce. I would suggest doing a non-minified build and trace the issue.

[maxhan]

@patrickhousley I am having an issue with your patch where if you start typing in the input, sometimes when you un-focus it then refocus it, it will erase everything you enter beyond the first letter. For example, if you enter 'New' and un-focus, refocus, all there remains is the letter 'N' and anything else you enter will be erased. There is a lot of errors in JS console when this happens.

Angular 1.4.8

[patrickhousley]

@maxhan please explain how you are leaving focus from the input and not having the entire select close. When the input looses focus, the select closes and what you have typed is removed.

[maxhan]

@patrickhousley Input field is suppose to be cleared once ui-select is unfocused, however, it was throwing "Expected multiple .ui-select-choices-row but got '{0}'" if you enter something then un-focus. Which is related to issue #224 .

After some further investigation, I found that with your patch, the input will stuck on the first letter you have entered before un-focusing as explained in my previous comment. Without your patch, the input box would appear clear and free for new inputs. However, it would still throw as per #224 .

[armanforghani]

I have the same problem using angularjs and nganimate 1.5, when I include ngAnimate in my app, after the first selection the input doesn't focus and i can't type.

[patrickhousley]

@maxhan Oh wow, sorry I didn't get an email for your reply and work as been super busy. I will try to take a look.

[patrickhousley]

I created a new plunker here for the issue described by @maxhan but I still cannot reproduce the issue. @maxhan can you take a look at the plunker and maybe update it so it reproduces your issue?

As for anyone having issues with angular 1.5, can you please update to the latest version of ui-select? I am wondering if #1430 does not fix your issues. If you are still having issues, please create a plunker and link it here.

[wesleycho]

Going to close this since it doesn't appear there are any more issues with reproductions that illustrate it. Feel free to open a new issue if this is still a problem with reproduction.

[priiduneemre]

Still getting major headaches when trying to use minimum-input-length together with ngAnimate, though (Plunkr from ui-select "Examples" page: http://plnkr.co/edit/N8HZDR5TkGMvWguDIt37?).

Any known workarounds for this?

[ZadaWu]

My solution is very hard!

angular
	.module('mainApp').directive('uiSelectFocusInput', function($timeout, $animate){
		return {
			require: 'ui-select',
			link: function (scope, $element, $attributes, selectController) {
				scope.$on('uis:activate',function(){
					scope.$select.search = scope.$select.selected.name;
				});
			}
		};
	});