Prevent toggling on links click inside a label (#93)

* Prevent toggling on links click inside a label * Make __interactionsAllowed() private
vaadin · May 28, 2018 · b5e003d · b5e003d
1 parent 8f7667c
commit b5e003d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/demo/checkbox-basic-demos.html b/demo/checkbox-basic-demos.html
@@ -9,7 +9,7 @@
     <h3>Basic Checkbox</h3>
     <vaadin-demo-snippet id="checkbox-basic-demos-default-checkbox">
       <template preserve-content>
-        <vaadin-checkbox checked>Option label</vaadin-checkbox>
+        <vaadin-checkbox checked>I agree with <a href>Terms & Conditions</a></vaadin-checkbox>
       </template>
     </vaadin-demo-snippet>
 

diff --git a/src/vaadin-checkbox.html b/src/vaadin-checkbox.html
@@ -207,7 +207,7 @@
         _addActiveListeners() {
           // DOWN
           this._addEventListenerToNode(this, 'down', (e) => {
-            if (!this.disabled) {
+            if (this.__interactionsAllowed(e)) {
               this.setAttribute('active', '');
             }
           });
@@ -217,15 +217,15 @@
 
           // KEYDOWN
           this.addEventListener('keydown', e => {
-            if (!this.disabled && e.keyCode === 32) {
+            if (this.__interactionsAllowed(e) && e.keyCode === 32) {
               e.preventDefault();
               this.setAttribute('active', '');
             }
           });
 
           // KEYUP
           this.addEventListener('keyup', e => {
-            if (!this.disabled && e.keyCode === 32) {
+            if (this.__interactionsAllowed(e) && e.keyCode === 32) {
               e.preventDefault();
               this._toggleChecked();
               this.removeAttribute('active');
@@ -241,8 +241,25 @@
           return this.shadowRoot.querySelector('label');
         }
 
+        /**
+         * True if users' interactions (mouse or keyboard)
+         * should toggle the checkbox
+         */
+        __interactionsAllowed(e) {
+          if (this.disabled) {
+            return false;
+          }
+
+          // https://github.com/vaadin/vaadin-checkbox/issues/63
+          if (e.target.localName === 'a') {
+            return false;
+          }
+
+          return true;
+        }
+
         _handleClick(e) {
-          if (!this.disabled) {
+          if (this.__interactionsAllowed(e)) {
             if (!this.indeterminate) {
               if (e.composedPath()[0] !== this._nativeCheckbox) {
                 e.preventDefault();

diff --git a/test/vaadin-checkbox_test.html b/test/vaadin-checkbox_test.html
@@ -43,7 +43,7 @@
 
   <test-fixture id="default">
     <template>
-      <vaadin-checkbox name="test-checkbox">Vaadin <i>Checkbox</i></vaadin-checkbox>
+      <vaadin-checkbox name="test-checkbox">Vaadin <i>Checkbox</i> with <a href="#">Terms &amp; Conditions</a></vaadin-checkbox>
     </template>
   </test-fixture>
 
@@ -109,6 +109,13 @@
         expect(vaadinCheckbox.checked).to.be.false;
       });
 
+      it('should not toggle on link inside host click', () => {
+        const link = Polymer.dom(label).getEffectiveChildNodes()[4];
+        expect(link.outerHTML).to.be.equal('<a href="#">Terms &amp; Conditions</a>');
+        link.click();
+        expect(vaadinCheckbox.checked).to.be.false;
+      });
+
       it('should bind checked to the native checkbox and vice versa', () => {
         vaadinCheckbox.checked = true;
         expect(nativeCheckbox.checked).to.be.eql(true);