Angular Animate issue

[AdrianTP]

I'm using Angular 1.2.8 (upgrading is not an option).

The very first time I enter text in the typeahead input, I receive the suggestion list just fine. If I click anywhere or type some more in the box after that, I get the following error:

TypeError: Cannot read property 'querySelectorAll' of undefined
    at cancelChildAnimations (angular-animate.js:807)

As a result, the suggestion list never updates (though the XHR which populates it returns its data just fine).

Here's a snippet of my template:

<label for="mgrFilter">Manager:</label>
<div mass-autocomplete>
    <input ng-model="manager" mass-autocomplete-item="macOptions" />
</div>

Here's a snippet of my controller:

var addSelection = function(selected) {
    $scope.manager = selected.value;
};

var managerTypeahead = function(term) {
    var deferred = $q.defer();

    managers.get(term).then(function(res) {
        var formatted = [];

        for (var i = 0; i < res.length; ++ i) {
            formatted.push({
                label: res[i].firstname + ' ' + res[i].lastname + ' (' + res[i].uid + ') ' + res[i].title,
                value: res[i].uid
            });
        }

        deferred.resolve(formatted);
    });

    return deferred.promise;
};

$scope.macOptions = {
    on_select: addSelection,
    on_error: console.log,
    suggest: managerTypeahead
};

I am using the workaround for a parent with position: fixed; presented in #13, but I doubt that has anything to do with it.

[hakib]

Hey @AdrianTP, could you setup a jsbin demonstrating the issue (you can mock remote by using timeout) and maybe expand a bit on what animation are you trying to achieve here.

[AdrianTP]

I'd be glad to, but I suspect the issue would not present itself in that scenario. The thing that confused me is that I did not reference ng-animate anywhere on the page, so I assumed it was something to do with MassAutocomplete. Since I inherited the client-side portion of this app, I have not once used ng-animate anywhere, and I am unsure where it is used, if at all.

In any case, I am not personally trying to achieve any animation; I just want a functional typeahead (most of the good ones require newer versions of Angular; so far this is the only one I found which both works in 1.2.8 and also does not require Bootstrap).

[AdrianTP]

I figured out what is going on. It's probably a bug in the version of ngAnimate that we are using:

ngAnimate has the ability to ignore elements with certain classes which is specified in a method call inside the app config. So I did that. The problem is this version of ngAnimate always calls cancelChildAnimations() whenever leaving or moving an element, and the cancelChildAnimations() method is where the failure is occurring. The method assumes that every node that comes through it will be nodeType 1 (ELEMENT_NODE), but the elements being passed in when it tries to hook onto the suggestion list are coming through as nodeType 8 (COMMENT_NODE) for whatever reason, despite actually being nodeType 1. As a result, the method calls node.querySelectorAll(), and because the element is not nodeType 1, the node var is undefined and it's trying to call querySelectorAll on an undefined object, which throws the error and halts everything.

Really, there are two problems:

1. For some reason the elements in MassAutocomplete are being seen as nodeType 8
2. ngAnimate fails to check whether it got a valid node of nodeType 1 before attempting to call querySelectorAll() on it.

Here's the ngAnimate issue ticket for the problem:
angular/angular.js#4548

After some finagling, I managed to upgrade the dependencies from Angular 1.2.8 to 1.2.26 and the problem went away, so I'm going to close this issue.

[hakib]

Glad you found a solution. Thanks for the info !