updated controls behavior when number-field is disabled

vaadin · Aug 15, 2017 · e9b1704 · e9b1704
1 parent 1d8ae10
commit e9b1704
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/demo/number-field.html b/demo/number-field.html
@@ -29,7 +29,7 @@ <h3>Number Field with controls</h3>
         <vaadin-number-field has-controls></vaadin-number-field>
       </template>
     </demo-snippet>
-    
+
     <h3>Number Field with value limits</h3>
     <demo-snippet>
       <template>
@@ -39,4 +39,4 @@ <h3>Number Field with value limits</h3>
   </div>
 </body>
 
-</html>
+</html>
diff --git a/test/number-field.html b/test/number-field.html
@@ -27,7 +27,7 @@
       });
 
       describe('native', function() {
-  
+
         it('should have [type=number]', function() {
           expect(input.type).to.equal('number');
         });
@@ -46,7 +46,7 @@
             expect(attrval).to.be.equal(String(value));
           });
         });
-          
+
       });
 
       describe('value control buttons', function() {
@@ -62,40 +62,51 @@
 
         it('should increase value by 1 when increaseButton is clicked', function() {
           numberField.value = 0;
-          
+
           increaseButton.click();
-          
+
           expect(numberField.value).to.be.equal(1);
         });
 
         it('should decrease value by 1 when increaseButton is clicked', function() {
           numberField.value = 0;
-          
+
           decreaseButton.click();
-          
+
           expect(numberField.value).to.be.equal(-1);
         });
 
         it('should not increase value when increaseButton is clicked and max value is reached', function() {
           numberField.value = 10;
           numberField.max = 10;
-          
+
           increaseButton.click();
-          
+
           expect(numberField.value).to.be.equal(10);
         });
 
         it('should not decrease value when decreaseButton is clicked and min value is reached', function() {
           numberField.value = 1;
           numberField.min = 1;
-          
+
           decreaseButton.click();
-          
+
           expect(numberField.value).to.be.equal(1);
         });
+
+        it('should not change value when number field is disabled and controls are clicked', function() {
+          numberField.disabled = true;
+          numberField.value = 0;
+
+          increaseButton.click();
+          expect(numberField.value).to.be.equal(0);
+
+          decreaseButton.click();
+          expect(numberField.value).to.be.equal(0);
+        });
       });
 
     });
   </script>
 </body>
-</html>
+</html>
diff --git a/vaadin-number-field.html b/vaadin-number-field.html
@@ -56,15 +56,15 @@
       }
     </style>
 
-    <div 
-      part="decrease-button" 
-      on-click="_decreaseValue" 
+    <div
+      part="decrease-button"
+      on-click="_decreaseValue"
       hidden$="[[!hasControls]]">
     </div>
 
-    <div 
-      part="increase-button" 
-      on-click="_increaseValue" 
+    <div
+      part="increase-button"
+      on-click="_increaseValue"
       hidden$="[[!hasControls]]">
     </div>
   </template>
@@ -107,7 +107,7 @@
             */
             min: {
               type: Number,
-              reflectToAttribue: true,       
+              reflectToAttribue: true,
               observer: '_minChanged'
             },
 
@@ -123,7 +123,7 @@
         }
 
         ready() {
-          super.ready();          
+          super.ready();
           this.$.input.type = 'number';
         }
 
@@ -150,6 +150,10 @@
         }
 
         _decreaseValue() {
+          if (this.disabled) {
+            return;
+          }
+
           if (this.min) {
             if (this.value > this.min) {
               this.value--;
@@ -160,6 +164,10 @@
         }
 
         _increaseValue() {
+          if (this.disabled) {
+            return;
+          }
+
           if (this.max) {
             if (this.value < this.max) {
               this.value++;
@@ -176,7 +184,7 @@
         _maxChanged() {
           this.$.input.max = this.max;
         }
-        
+
       }
 
       window.customElements.define(NumberFieldElement.is, NumberFieldElement);
@@ -188,4 +196,4 @@
       Vaadin.NumberFieldElement = NumberFieldElement;
     })();
   </script>
-</dom-module>
+</dom-module>