From 9ba6e02f2917b0e365695185f0cfe54a31bbb492 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Wed, 12 Jun 2019 22:11:37 +0200
Subject: [PATCH] fix(validate): reset validation state when modelValue becomes
 undefined

---
 packages/validate/src/ValidateMixin.js       |  8 ++++-
 packages/validate/test/ValidateMixin.test.js | 36 ++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/packages/validate/src/ValidateMixin.js b/packages/validate/src/ValidateMixin.js
index d0d1d7059..1a1a32f34 100644
--- a/packages/validate/src/ValidateMixin.js
+++ b/packages/validate/src/ValidateMixin.js
@@ -385,7 +385,13 @@ export const ValidateMixin = dedupeMixin(
        * Other transitions (from Warning/Info) are not followed by a success message
        */
       validate() {
-        if (this.modelValue === undefined) return;
+        if (this.modelValue === undefined) {
+          this.constructor.validationTypes.forEach(type => {
+            this[`${type}State`] = false;
+            this[type] = {};
+          });
+          return;
+        }
         this.__oldValidationStates = this.getValidationStates();
         this.constructor.validationTypes.forEach(type => {
           this.validateType(type);
diff --git a/packages/validate/test/ValidateMixin.test.js b/packages/validate/test/ValidateMixin.test.js
index 1324c350c..c2af922c1 100644
--- a/packages/validate/test/ValidateMixin.test.js
+++ b/packages/validate/test/ValidateMixin.test.js
@@ -501,6 +501,36 @@ describe('ValidateMixin', () => {
       expect(cbInfo.callCount).to.equal(2);
       expect(cbSuccess.callCount).to.equal(1);
     });
+
+    it('removes invalid states whenever modelValue becomes undefined', async () => {
+      const el = await fixture(html`
+        <${tag}
+          .errorValidators=${[[minLength, { min: 3 }]]}
+          .warningValidators=${[[minLength, { min: 5 }]]}
+          .infoValidators=${[[minLength, { min: 7 }]]}
+          .successValidators=${[[alwaysFalse]]}
+        >${lightDom}</${tag}>
+      `);
+
+      el.modelValue = 'a';
+      expect(el.warningState).to.equal(true);
+      expect(el.infoState).to.equal(true);
+      expect(el.successState).to.equal(true);
+      expect(el.error).to.not.eql({});
+      expect(el.warning).to.not.eql({});
+      expect(el.info).to.not.eql({});
+      expect(el.success).to.not.eql({});
+
+      el.modelValue = undefined;
+      expect(el.errorState).to.equal(false);
+      expect(el.warningState).to.equal(false);
+      expect(el.infoState).to.equal(false);
+      expect(el.successState).to.equal(false);
+      expect(el.error).to.eql({});
+      expect(el.warning).to.eql({});
+      expect(el.info).to.eql({});
+      expect(el.success).to.eql({});
+    });
   });
 
   describe(`Accessibility ${suffixName}`, () => {
@@ -690,6 +720,9 @@ describe('ValidateMixin', () => {
       const errorRenderer = defineCE(
         class extends HTMLElement {
           renderFeedback(validationStates, message) {
+            if (!message.list.length) {
+              return;
+            }
             const validator = message.list[0].data.validatorName;
             const showError = validationStates.error;
             this.innerText = showError ? `ERROR on ${validator}` : '';
@@ -982,6 +1015,9 @@ describe('ValidateMixin', () => {
         const errorRenderer = defineCE(
           class extends HTMLElement {
             renderFeedback(validationStates, message) {
+              if (!message.list.length) {
+                return;
+              }
               const validator = message.list[0].data.validatorName;
               const hide =
                 message.list[0].data.validatorConfig &&