fix(ngTouch/ngClick): don't bust clicks if the input is inside a label

In our code we have an input element inside a label. The click on the label
generates two clicks, but the second click was not recognised by angular-touch
as a label click, because it only looks at the current element, instead of
looking for a label in parent elements. Therefore, the second click gets
busted, and clicking on the label doesn't do anything for 2500ms.

Closes angular#11577

Author: mobilabgit

src/ngTouch/directive/ngClick.js

@@ -144,7 +144,7 @@ ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement',
       lastLabelClickCoordinates = null;
     }
     // remember label click coordinates to prevent click busting of trigger click event on input
-    if (nodeName_(event.target) === 'label') {
+    if (findUpLabel(event.target)) {
       lastLabelClickCoordinates = [x, y];
     }
 
@@ -163,6 +163,12 @@ ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement',
     event.target && event.target.blur && event.target.blur();
   }
 
+  function findUpLabel(el) {
+    while (el) {
+      if (nodeName_(el) === 'label') return true;
+      el = el.parentNode;
+    }
+  }
 
   // Global touchstart handler that creates an allowable region for a click event.
   // This allowable region can be removed by preventGhostClick if we want to bust it.

test/ngTouch/directive/ngClickSpec.js

@@ -409,9 +409,9 @@ describe('ngClick (touch)', function() {
       expect($rootScope.count).toBe(2);
     }));
 
+    describe('near a input and label', function() {
 
-    describe('when clicking on a label immediately following a touch event', function() {
-      var touch = function(element, x, y) {
+      function touch(element, x, y) {
         time = 10;
         browserTrigger(element, 'touchstart',{
           keys: [],
@@ -425,99 +425,129 @@ describe('ngClick (touch)', function() {
           x: x,
           y: y
         });
-      };
+      }
 
-      var click = function(element, x, y) {
+      function click(element, x, y) {
         browserTrigger(element, 'click',{
           keys: [],
           x: x,
           y: y
         });
-      };
+      }
 
-      var $rootScope;
-      var container, otherElement, input, label;
-      beforeEach(inject(function(_$rootScope_, $compile, $rootElement) {
-        $rootScope = _$rootScope_;
-        var container = $compile('<div><div ng-click="count = count + 1"></div>' +
-          '<input id="input1" type="radio" ng-model="selection" value="radio1">' +
-          '<label for="input1">Input1</label></div>')($rootScope);
-        $rootElement.append(container);
-        otherElement = container.children()[0];
-        input = container.children()[1];
-        label = container.children()[2];
+      describe('immediately following a touch event', function() {
 
-        $rootScope.selection = 'initial';
+        var $rootScope;
+        var container, otherElement, input, label;
 
-        $rootScope.$digest();
-      }));
+        beforeEach(inject(function(_$rootScope_, $compile, $rootElement) {
+          $rootScope = _$rootScope_;
+          var container = $compile('<div><div ng-click="count = count + 1"></div>' +
+            '<input id="input1" type="radio" ng-model="selection" value="radio1">' +
+            '<label for="input1">Input1</label></div>')($rootScope);
+          $rootElement.append(container);
+          otherElement = container.children()[0];
+          input = container.children()[1];
+          label = container.children()[2];
 
+          $rootScope.selection = 'initial';
 
-      afterEach(function() {
-        dealoc(label);
-        dealoc(input);
-        dealoc(otherElement);
-        dealoc(container);
-      });
+          $rootScope.$digest();
+        }));
 
 
-      it('should not cancel input clicks with (0,0) coordinates', function() {
-        touch(otherElement, 100, 100);
+        afterEach(function() {
+          dealoc(container);
+        });
 
-        time = 500;
-        click(label, 10, 10);
-        click(input, 0, 0);
 
-        expect($rootScope.selection).toBe('radio1');
-      });
+        it('should not cancel input clicks with (0,0) coordinates', function() {
+          touch(otherElement, 100, 100);
 
+          time = 500;
+          click(label, 10, 10);
+          click(input, 0, 0);
 
-      it('should not cancel input clicks with negative coordinates', function() {
-        touch(otherElement, 100, 100);
+          expect($rootScope.selection).toBe('radio1');
+        });
 
-        time = 500;
-        click(label, 10, 10);
-        click(input, -1, -1);
 
-        expect($rootScope.selection).toBe('radio1');
-      });
+        it('should not cancel input clicks with negative coordinates', function() {
+          touch(otherElement, 100, 100);
 
+          time = 500;
+          click(label, 10, 10);
+          click(input, -1, -1);
 
-      it('should not cancel input clicks with positive coordinates identical to label click', function() {
-        touch(otherElement, 100, 100);
+          expect($rootScope.selection).toBe('radio1');
+        });
 
-        time = 500;
-        click(label, 10, 10);
-        click(input, 10, 10);
 
-        expect($rootScope.selection).toBe('radio1');
-      });
+        it('should not cancel input clicks with positive coordinates identical to label click', function() {
+          touch(otherElement, 100, 100);
+
+          time = 500;
+          click(label, 10, 10);
+          click(input, 10, 10);
+
+          expect($rootScope.selection).toBe('radio1');
+        });
+
 
+        it('should cancel input clicks with positive coordinates different than label click', function() {
+          touch(otherElement, 100, 100);
 
-      it('should cancel input clicks with positive coordinates different than label click', function() {
-        touch(otherElement, 100, 100);
+          time = 500;
+          click(label, 10, 10);
+          click(input, 11, 11);
 
-        time = 500;
-        click(label, 10, 10);
-        click(input, 11, 11);
+          expect($rootScope.selection).toBe('initial');
+        });
+
+
+        it('should blur the other element on click', function() {
+          var blurSpy = spyOn(otherElement, 'blur');
+          touch(otherElement, 10, 10);
 
-        expect($rootScope.selection).toBe('initial');
+          time = 500;
+          click(label, 10, 10);
+
+          expect(blurSpy).toHaveBeenCalled();
+        });
       });
 
 
-      it('should blur the other element on click', function() {
-        var blurSpy = spyOn(otherElement, 'blur');
-        touch(otherElement, 10, 10);
+      describe('where label contains the input', function() {
+
+        var $rootScope;
+        var container, otherElement, input, label;
 
-        time = 500;
-        click(label, 10, 10);
+        it('should not cancel input clicks with (0,0) coordinates', inject(function($rootScope, $compile, $rootElement) {
+          var container = $compile('<div><div ng-click="count = count + 1"></div>' +
+            '<label for="input1">Input1 ' +
+              '<input id="input1" type="radio" ng-model="selection" value="radio1">' +
+            '</label></div>')($rootScope);
 
-        expect(blurSpy).toHaveBeenCalled();
+          $rootElement.append(container);
+          otherElement = container.children()[0];
+          label = container.children().eq(1);
+          input = label.children()[0];
+
+          $rootScope.selection = 'initial';
+          $rootScope.$digest();
+
+          touch(otherElement, 100, 100);
+          click(input, 0, 0);
+          click(label, 10, 10);
+
+          expect($rootScope.selection).toBe('radio1');
+
+          dealoc(container);
+        }));
       });
     });
   });
 
-
   describe('click fallback', function() {
 
     it('should treat a click as a tap on desktop', inject(function($rootScope, $compile) {