fix: stuck in invalid state after last validation constraint is remov…

…ed while invalid
vaadin · Aug 9, 2019 · 8e1af44 · 8e1af44
1 parent bc2a1e5
commit 8e1af44
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
@@ -317,11 +317,19 @@
         '_hostAccessiblePropsChanged(' + HOST_PROPS.accessible.join(', ') + ')',
         '_getActiveErrorId(invalid, errorMessage, _errorId)',
         '_getActiveLabelId(label, _labelId, _inputId)',
-        '__observeOffsetHeight(errorMessage, invalid, label)',
-        '__constraintsChanged(required, minlength, maxlength, pattern, min, max, step)'
+        '__observeOffsetHeight(errorMessage, invalid, label)'
       ];
     }
 
+    constructor() {
+      super();
+      // This complex observer needs to be added dynamically here (instead of defining it above in the `get observers()`)
+      // so that it runs after complex observers of inheriting classes. Otherwise e.g. `_stepOrMinChanged()` observer of
+      // vaadin-number-field would run after this and the `min` and `step` properties would not yet be propagated to
+      // the `inputElement` when this runs.
+      this._createMethodObserver('__constraintsChanged(required, minlength, maxlength, pattern, min, max, step)');
+    }
+
     get focusElement() {
       if (!this.shadowRoot) {
         return;
@@ -508,7 +516,9 @@
         return;
       }
 
-      if (!required && !minlength && !maxlength && !pattern && !min && !max) {
+      const isNumUnset = n => (!n && n !== 0);
+
+      if (!required && !minlength && !maxlength && !pattern && isNumUnset(min) && isNumUnset(max)) {
         this.invalid = false;
       } else {
         this.validate();

diff --git a/test/number-field.html b/test/number-field.html
@@ -768,6 +768,26 @@
             numberField.step = '';
             expect(numberField.invalid).to.be.false;
           });
+
+          it('should not set "invalid" to false when "min" is set to 0', () => {
+            numberField.value = '-5';
+            numberField.min = -1;
+            numberField.validate();
+            expect(numberField.invalid).to.be.true;
+
+            numberField.min = 0;
+            expect(numberField.invalid).to.be.true;
+          });
+
+          it('should not set "invalid" to false when "max" is set to 0', () => {
+            numberField.value = '5';
+            numberField.max = 1;
+            numberField.validate();
+            expect(numberField.invalid).to.be.true;
+
+            numberField.max = 0;
+            expect(numberField.invalid).to.be.true;
+          });
         });
       });