fix(ngAnimate): ensure that all jqLite elements are deconstructed properly

Prior to this fix if a form DOM element was fed into parts of the
ngAnimate queuing code it would attempt to detect if it is a jqLite
object in an unstable way which would allow a form element to return an
inner input element by index. This patch ensures that jqLite instances
are properly detected using a helper method.

Closes angular#11658

Author: matsko

src/ngAnimate/.jshintrc

@@ -36,6 +36,7 @@
     "packageStyles": false,
     "removeFromArray": false,
     "stripCommentsFromElement": false,
-    "extractElementNode": false
+    "extractElementNode": false,
+    "getFirstNode": false
   }
 }

src/ngAnimate/animateCss.js

@@ -472,7 +472,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
       return stagger || {};
     }
 
-    var bod = $document[0].body;
+    var bod = getFirstNode($document).body;
     var cancelLastRAFRequest;
     var rafWaitQueue = [];
     function waitUntilQuiet(callback) {
@@ -521,7 +521,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
     }
 
     function init(element, options) {
-      var node = element[0];
+      var node = getFirstNode(element);
       options = prepareAnimationOptions(options);
 
       var temporaryStyles = [];

src/ngAnimate/animateCssDriver.js

@@ -16,8 +16,8 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
     // only browsers that support these properties can render animations
     if (!$sniffer.animations && !$sniffer.transitions) return noop;
 
-    var bodyNode = $document[0].body;
-    var rootNode = $rootElement[0];
+    var bodyNode = getFirstNode($document).body;
+    var rootNode = getFirstNode($rootElement);
 
     var rootBodyElement = jqLite(bodyNode.parentNode === rootNode ? bodyNode : rootNode);
 
@@ -44,7 +44,7 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
     }
 
     function prepareAnchoredAnimation(classes, outAnchor, inAnchor) {
-      var clone = jqLite(outAnchor[0].cloneNode(true));
+      var clone = jqLite(getFirstNode(outAnchor).cloneNode(true));
       var startingClasses = filterCssClasses(clone.attr('class') || '');
       var anchorClasses = pendClasses(classes, NG_ANIMATE_ANCHOR_SUFFIX);
 
@@ -113,7 +113,7 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
       function calculateAnchorStyles(anchor) {
         var styles = {};
 
-        var coords = anchor[0].getBoundingClientRect();
+        var coords = getFirstNode(anchor).getBoundingClientRect();
 
         // we iterate directly since safari messes up and doesn't return
         // all the keys for the coods object when iterated

src/ngAnimate/animateQueue.js

@@ -117,7 +117,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
     }
 
     function findCallbacks(element, event) {
-      var targetNode = element[0];
+      var targetNode = getFirstNode(element);
 
       var matches = [];
       var entries = callbackRegistry[event];
@@ -198,7 +198,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
             // (bool) - Global setter
             bool = animationsEnabled = !!element;
           } else {
-            var node = element.length ? element[0] : element;
+            var node = getFirstNode(element);
             var recordExists = disabledElementsLookup.get(node);
 
             if (argCount === 1) {
@@ -222,7 +222,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
 
     function queueAnimation(element, event, options) {
       element = stripCommentsFromElement(element);
-      var node = element[0];
+      var node = getFirstNode(element);
 
       options = prepareAnimationOptions(options);
       var parent = element.parent();
@@ -408,7 +408,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
           close(!status);
           var animationDetails = activeAnimationsLookup.get(node);
           if (animationDetails && animationDetails.counter === counter) {
-            clearElementAnimationState(element);
+            clearElementAnimationState(getFirstNode(element));
           }
           notifyProgress(runner, event, 'close', {});
         });
@@ -435,7 +435,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
     }
 
     function closeChildAnimations(element) {
-      var node = element[0];
+      var node = getFirstNode(element);
       var children = node.querySelectorAll('[' + NG_ANIMATE_ATTR_NAME + ']');
       forEach(children, function(child) {
         var state = parseInt(child.getAttribute(NG_ANIMATE_ATTR_NAME));
@@ -454,9 +454,9 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
     }
 
     function clearElementAnimationState(element) {
-      element = element.length ? element[0] : element;
-      element.removeAttribute(NG_ANIMATE_ATTR_NAME);
-      activeAnimationsLookup.remove(element);
+      var node = getFirstNode(element);
+      node.removeAttribute(NG_ANIMATE_ATTR_NAME);
+      activeAnimationsLookup.remove(node);
     }
 
     function isMatchingElement(a,b) {
@@ -466,7 +466,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
     }
 
     function closeParentClassBasedAnimations(startingElement) {
-      var parentNode = startingElement[0];
+      var parentNode = getFirstNode(startingElement);
       do {
         if (!parentNode || parentNode.nodeType !== ELEMENT_NODE) break;
 
@@ -563,14 +563,14 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
       details = details || {};
       details.state = state;
 
-      element = element.length ? element[0] : element;
-      element.setAttribute(NG_ANIMATE_ATTR_NAME, state);
+      var node = getFirstNode(element);
+      node.setAttribute(NG_ANIMATE_ATTR_NAME, state);
 
-      var oldValue = activeAnimationsLookup.get(element);
+      var oldValue = activeAnimationsLookup.get(node);
       var newValue = oldValue
           ? extend(oldValue, details)
           : details;
-      activeAnimationsLookup.put(element, newValue);
+      activeAnimationsLookup.put(node, newValue);
     }
   }];
 }];

src/ngAnimate/animation.js

@@ -128,7 +128,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
         var refLookup = {};
         forEach(animations, function(animation, index) {
           var element = animation.element;
-          var node = element[0];
+          var node = getFirstNode(element);
           var event = animation.event;
           var enterOrMove = ['enter', 'move'].indexOf(event) >= 0;
           var anchorNodes = animation.structural ? getAnchorNodes(node) : [];

src/ngAnimate/shared.js

@@ -234,3 +234,7 @@ function resolveElementClasses(existing, toAdd, toRemove) {
 
   return classes;
 }
+
+function getFirstNode(element) {
+  return (element instanceof angular.element) ? element[0] : element;
+}

test/ngAnimate/animateSpec.js

@@ -530,6 +530,32 @@ describe("animations", function() {
         expect(itsOver).toBe(true);
       }));
 
+      it('should immediately end a parent class-based form animation if a structural child is active',
+        inject(function($rootScope, $animate, $rootElement, $$rAF, $$AnimateRunner) {
+
+        parent.remove();
+        element.remove();
+
+        parent = jqLite('<form></form>');
+        $rootElement.append(parent);
+
+        element = jqLite('<input type="text" name="myInput" />');
+
+        $animate.addClass(parent, 'abc');
+        $rootScope.$digest();
+
+        // we do this since the old runner was already closed
+        overriddenAnimationRunner = new $$AnimateRunner();
+
+        $animate.enter(element, parent);
+        $rootScope.$digest();
+
+        $$rAF.flush();
+
+        expect(parent.attr('data-ng-animate')).toBeFalsy();
+        expect(element.attr('data-ng-animate')).toBeTruthy();
+      }));
+
       it('should not end a pre-digest parent animation if it does not have any classes to add/remove',
         inject(function($rootScope, $animate, $$rAF) {