Fix setting min/max value with controls

vaadin · Jan 21, 2019 · b48f685 · b48f685
1 parent 471a367
commit b48f685
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 5 deletions.
diff --git a/src/vaadin-number-field.html b/src/vaadin-number-field.html
@@ -165,22 +165,65 @@
         }
 
         _decreaseValue() {
-          this._allowed(-1) && this.__add(-1);
+          const incrementSign = this._getAllowedIncrementSign(-1);
+
+          if (incrementSign) {
+            this.__add(incrementSign);
+          }
         }
 
         _increaseValue() {
-          this._allowed(1) && this.__add(1);
+          const incrementSign = this._getAllowedIncrementSign(1);
+
+          if (incrementSign) {
+            this.__add(incrementSign);
+          }
         }
 
         __add(sign) {
           const incr = sign * (this.step || 1);
           // Behave like native number input adjusting to the next exact multiple of step.
-          this.value = this.focusElement.value =
-            (incr + (incr * Math.floor((parseFloat(this.value || 0) / incr).toFixed(1)))).toFixed(this.__decimals);
+          this.value = this.focusElement.value = this._getValue(incr);
           this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
         }
 
-        _allowed(sign, value, min, max) {
+        _getValue(incr) {
+          return (incr + (incr * Math.floor((parseFloat(this.value || 0) / incr).toFixed(1)))).toFixed(this.__decimals);
+        }
+
+        _getAllowedIncrementSign(sign) {
+          if (this.disabled) {
+            return false;
+          }
+
+          const initialIncr = sign * (this.step || 1);
+
+          if (initialIncr > 0) {
+            const validMin = this.min == null || this._getValue(initialIncr) > this.min;
+            const validMax = this.max == null || this.value < this.max;
+
+            if (validMin && validMax) {
+              return sign;
+            } else if (!validMax) {
+              return false;
+            } else if (!validMin) {
+              return this.min / initialIncr;
+            }
+          } else {
+            const validMin = this.min == null || this.value > this.min;
+            const validMax = this.max == null || this._getValue(initialIncr) < this.max;
+
+            if (validMin && validMax) {
+              return sign;
+            } else if (!validMin) {
+              return false;
+            } else if (!validMax) {
+              return this.max / (this.step || 1);
+            }
+          }
+        }
+
+        _allowed(sign) {
           const incr = sign * (this.step || 1);
           return !this.disabled && (incr < 0
             ? this.min == null || this.value > this.min

diff --git a/test/number-field.html b/test/number-field.html
@@ -199,6 +199,40 @@
           expect(e.defaultPrevented).to.be.true;
           expect(numberField.value).to.equal('0');
         });
+
+        it('should increase value to min value when increaseButton is clicked', () => {
+          numberField.min = 2;
+
+          increaseButton.click();
+
+          expect(numberField.value).to.be.equal('2');
+        });
+
+        it('should increase value to min value with step when increaseButton is clicked', () => {
+          numberField.step = 0.1;
+          numberField.min = 0.5;
+
+          increaseButton.click();
+
+          expect(numberField.value).to.be.equal('0.5');
+        });
+
+        it('should decrease value to max value when decreaseButton is clicked', () => {
+          numberField.max = -2;
+
+          decreaseButton.click();
+
+          expect(numberField.value).to.be.equal('-2');
+        });
+
+        it('should decrease value to max value with step when decreaseButton is clicked', () => {
+          numberField.step = 0.1;
+          numberField.max = -0.5;
+
+          decreaseButton.click();
+
+          expect(numberField.value).to.be.equal('-0.5');
+        });
       });
 
       describe('input validation', () => {