Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

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

Closed
hamfastgamgee opened this issue Nov 24, 2014 · 45 comments

Comments

@hamfastgamgee
Copy link

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
Copy link
Contributor

matsko commented Nov 24, 2014

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

@hamfastgamgee
Copy link
Author

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
Copy link
Author

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

@matsko matsko self-assigned this Nov 25, 2014
@hamfastgamgee
Copy link
Author

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
Copy link
Author

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

@beachygreg
Copy link

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
Copy link

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

@hamfastgamgee
Copy link
Author

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
Copy link
Contributor

matsko commented Jan 15, 2015

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

@crisbeto
Copy link
Member

crisbeto commented Feb 2, 2015

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>

@rochdev
Copy link

rochdev commented Feb 2, 2015

I am also getting this error with just an empty directive with transclude: 'element'.

@caitp
Copy link
Contributor

caitp commented Feb 2, 2015

this will happen with element transclusion, if you don't arrange things just right, because the "element" will be a comment node, which is ignored by ngAnimate (properties like $$tlb and directive priority are able to work around this, but admittedly it's hard)

@rochdev
Copy link

rochdev commented Feb 2, 2015

Ok it seems to work with a higher priority.

See http://plnkr.co/edit/vrl5ATDXNkE5v4LrFwDE for a basic not working example (without a priority setting).

@staeke
Copy link

staeke commented Feb 3, 2015

I've reproduced a(nother) case that looks like the same bug. ngClass never manages to set a class since parentNode is undefined and shortcuts runAnimationPostDigest. This bug is currently exposed e.g. in angular-foundation. Requirements for the bug

  • ngAnimate is imported and dependency declared (triggers the buggy logic)
  • There is a "dynamic" directive that is compiled "off-DOM"
  • This directive uses replace:true (means no normal parent node)
  • This directive is linked with a cloneAttachFn (means no document fragment)
  • It is not added to the DOM immediately (done with $timeout here, often the case for popups and similar)

Plunkr to reproduce http://plnkr.co/edit/rTfUUjkemyl7xfBwjn58?p=preview

@staeke
Copy link

staeke commented Feb 6, 2015

Is that a good enough plunkr for you @matsko

@staeke
Copy link

staeke commented Feb 20, 2015

Any idea of when you have time to look at this or if you think I should open another case for this @matsko ?

@matsko
Copy link
Contributor

matsko commented Feb 20, 2015

This is fixed for 1.4 (everything was refactored). Once that's merged in next week then I can fix it for 1.3.

@staeke
Copy link

staeke commented Feb 20, 2015

ah great

@BenSwennen
Copy link

What is the status on the fix for 1.3 ?
FIY: I had to had following to line 1204 to temporarily fix it:

if(elementNode !== undefined)
   var parentNode = elementNode.parentNode;

@crisbeto
Copy link
Member

Was this fixed in 1.3.15? I just updated and it doesn't seem to be happening anymore.

@felipe-pereira
Copy link

I'm using 1.3.15, the issue is still present.

@stephengardner
Copy link

ng-show on an element with a directive whose directive returns transclusion.

In my case, I solved my specific instance of this error by wrapping the directive div in another div, and applied the ng-show to that outer div only.

Hopefully that helps someone else snake through their code a little easier. Isolating the case by iteratively applying ng-if="0" to the elements in your views may help isolate it as well.

@ansgarkroger
Copy link

We are experiencing this issue with 1.3.17. Replacing
line 1999 var parentNode = elementNode.parentNode;
with
var parentNode = elementNode === undefined ? undefined : elementNode.parentNode;
seems to work.

@crisbeto
Copy link
Member

If I remember correctly, this was fixed in 1.4.0.

@e-cloud
Copy link

e-cloud commented Jul 31, 2015

but there are a lot more that using 1.3.x

@gerardp
Copy link

gerardp commented Aug 3, 2015

I'm using 1.3.17 and i have the same error, please fix it !

@samypr100
Copy link

Where's the fix for 1.3.x????

@RamonBeast
Copy link

+1

@kichooo
Copy link

kichooo commented Aug 17, 2015

+1 ;)

@yeahoffline
Copy link

+1

@Blackbaud-PatrickOFriel

I'd love to get a fix for 1.3.x as well

matsko added a commit to matsko/angular.js that referenced this issue Aug 17, 2015
@matsko
Copy link
Contributor

matsko commented Aug 17, 2015

Here's a pending fix: #12603

matsko added a commit to matsko/angular.js that referenced this issue Aug 18, 2015
@matsko
Copy link
Contributor

matsko commented Aug 18, 2015

Alright we have this merged into 1.3.x: 2c03a35

We should have a new release of 1.3 this week (hopefully tomorrow).

@matsko matsko closed this as completed Aug 18, 2015
@matsko
Copy link
Contributor

matsko commented Aug 19, 2015

FYI folks, 1.3.18 has been released and it contains the fix: https://code.angularjs.org/1.3.18/

@Blackbaud-PatrickOFriel

You're the man!

@mattrasband
Copy link

This is awesome, we were having this issue yesterday and just upped our angular version. Can confirm that this fixed the issue as we were seeing it.

@elishaterada
Copy link

This fixed the issue on my project as well

@smarbos
Copy link

smarbos commented Sep 2, 2015

I was having the same problem.
i have a ng-hide in the same element that has a pagination directive.

@matsko
Copy link
Contributor

matsko commented Sep 2, 2015

@smarbos this was fixed with 1.3.18 yes?

@smarbos
Copy link

smarbos commented Sep 3, 2015

I know. Just saying.... In my case i can't update angular.So i fix it
putting the ng-show in another div.
Thank you!
On Wed, Sep 2, 2015 at 6:55 PM Matias Niemelä [email protected]
wrote:

@smarbos https://github.com/smarbos this was fixed with 1.3.18 yes?


Reply to this email directly or view it on GitHub
#10205 (comment)
.

@matsko
Copy link
Contributor

matsko commented Sep 3, 2015

You couldn't update at the time or you still can't update right now? 1.3.x releases don't have breaking changes so you should be fine. Or is there something more complicated?

@mariohmol
Copy link

I had this issue but i was using bower install --save ngAnimate instead of bower install --save angular-animate , fix it after using angular-animate

@noway
Copy link

noway commented Apr 25, 2017

Still present in 1.6.4 with ui-bootstrap 2.5.0

@kj1981
Copy link

kj1981 commented Aug 23, 2018

@matsko Is there any working solution that works with Angular 1.3.4, NgAnimate 1.3.0, angular-ui-bootstrap/0.13.4
Sorry but at this moment I cannot update these libraries so wanted to know if there is a workaround/hack for this because I am struggling to find solution or alternative. Below is my codepen if it helps: https://codepen.io/anon/pen/wEaoLG

@kj1981
Copy link

kj1981 commented Aug 23, 2018

@smarbos How did you fix it, any sample pls?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests