ngAnimate cause errors after updating to 1.3 (Cannot read property 'parentNode' of undefined)

[hamfastgamgee]

I think the guy who filed #9953 gave up too easily. :) I'm seeing the same error message in Angular 1.3. I'm using a modified version of the angular-ui bootstrap datepicker that uses ng-if to only render the control if it is open, and so I'm reasonably certain the analysis by @caitp in that issue is exactly the problem for me. If I add the following at line 1201 in angular-animate.js after the call to extractElementNode(), the error message goes away:

if (!elementNode) {
    done();
    return;
}

There's also a comment by @matsko there about refactoring some code into animationsDisabled() after #8092 is fixed, which it now is, so I'm not sure if there's some more work to be done in that area.

I have not noticed any consequences to this, since presumably we can't do much to animate a DOM element that isn't there...

[matsko]

@hamfastgamgee any chance you have a plunkr handy? The issue is more so the recreation of the bug by creating a test.

[hamfastgamgee]

I'm having a very hard time finding a reduced test case for it. The circumstances seem to be that an animation gets queued up somehow, the element is removed by the ng-if, and then the promise fires and the element is gone, so calling .parentNode fails. If I can find a reproducible test case, I will happily post it. The app I'm hitting it in is gigantic, so finding just a small chunk to extract without running afoul of legal is proving problematic. :)

Basically, we're wrapping the Angular-UI Datepicker in another directive that basically exists to add a label to the field, etc.

[hamfastgamgee]

Okay, here's a testcase. http://plnkr.co/edit/cIc0Zr?p=preview

The angular-ui bootstrap component that's included is stripped down to only include the datepicker control. The only changes to it from the stock component are to incorporate an ng-if="isOpen" in the popup.html template and then to support the new scope ng-if generated in the controller. Those changes are detailed in this PR on angular-ui bootstrap: angular-ui/bootstrap#1915

[hamfastgamgee]

And my theory is that if I took the datepicker out of play, that it would really come down to there being an ng-class or similar in a subcontrol to the ng-if.

[hamfastgamgee]

Anything else I can do to help speed the fix here? I don't like leaving Angular forked if I can avoid it. :)

[beachygreg]

I am having the same issue with typeahead from angular-ui/bootstrap. I added the line suggested and the error is gone.

I also get another error from a second typeahead that looks exactly the same as the one before (the typeahead is the same).

TypeError: Cannot read property 'type' of undefined
    at baseInputType (http://localhost:8100/lib/angular/angular.js:19548:34)

The odd thing is if I wrap the first typeahead in a div the error does not show.

[beachygreg]

Okay I wrapped both typeaheads in div's and the error is gone.

[hamfastgamgee]

Okay, I've managed to work around it in the datepicker in the same way (adding a div to the template). I'm thinking this is probably another side effect of whatever that bug is regarding ngAnimate issues if you have replace: true and ng-if on the first line of the template.

[matsko]

Sorry for the delays everyone. I will be reviewing this issue tomorrow.

[crisbeto]

I got this error, because I had ng-show on a ng-message element:

<div ng-messages="title">
    <div class="form-error" ng-message="required" ng-show="form.$submitted">This field is required</div> <!-- error -->
    <div class="form-error" ng-message="maxlength">Input is too long</div> <!-- no error -->
</div>