Add __forceCheckValidity (#452)

* Add __forceCheckValidity and test

* chore: add explicit sinonjs dependency

* Add note

* Update screenshots

bower.json

@@ -43,6 +43,7 @@
     "iron-test-helpers": "^2.0.0",
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5",
+    "sinonjs": "Polymer/sinon.js#^1.14.1",
     "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0",
     "vaadin-button": "vaadin/vaadin-button#^2.1.0"
   },

src/vaadin-text-field-mixin.html

@@ -572,7 +572,9 @@
      * @returns {boolean}
      */
     checkValidity() {
-      if (this.required || this.pattern || this.maxlength || this.minlength) {
+      // Note (Yuriy): `__forceCheckValidity` is used in containing components (i.e. `vaadin-date-picker`) in order
+      // to force the checkValidity instead of returning the previous invalid state.
+      if (this.required || this.pattern || this.maxlength || this.minlength || this.__forceCheckValidity) {
         return this.inputElement.checkValidity();
       } else {
         return !this.invalid;

test/validation.html

@@ -200,6 +200,15 @@
             expect(tf.invalid).to.be.true;
           });
 
+          it('should force check and change invalid property if `__forceCheckValidity` is set', function() {
+            tf.validate();
+            expect(tf.invalid).to.be.false;
+            tf.invalid = true;
+            tf.__forceCheckValidity = true;
+            tf.validate();
+            expect(tf.invalid).to.be.false;
+          });
+
           it('should override explicitly set invalid if constraints are set', function() {
             tf.invalid = true;
             tf.value = 'foo';