From 667eb81f036f4b7b5f245b30c9edd588a11aa860 Mon Sep 17 00:00:00 2001
From: gerjanvangeest <Gerjan.van.Geest@ing.com>
Date: Fri, 31 May 2019 11:36:02 +0200
Subject: [PATCH] fix(field): formats value after validation update

---
 packages/field/src/LionField.js        |  6 +++---
 packages/field/test/lion-field.test.js | 25 +++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/field/src/LionField.js b/packages/field/src/LionField.js
index 18225e988..7cd490e38 100644
--- a/packages/field/src/LionField.js
+++ b/packages/field/src/LionField.js
@@ -28,9 +28,9 @@ import { FormatMixin } from './FormatMixin.js';
 // TODO: Consider exporting as FieldMixin
 // eslint-disable-next-line max-len, no-unused-vars
 export class LionField extends FormControlMixin(
-  ValidateMixin(
-    InteractionStateMixin(
-      FormatMixin(
+  InteractionStateMixin(
+    FormatMixin(
+      ValidateMixin(
         CssClassMixin(ElementMixin(DelegateMixin(SlotMixin(ObserverMixin(LionLitElement))))),
       ),
     ),
diff --git a/packages/field/test/lion-field.test.js b/packages/field/test/lion-field.test.js
index 3e5f902b9..a8bac54cd 100644
--- a/packages/field/test/lion-field.test.js
+++ b/packages/field/test/lion-field.test.js
@@ -327,6 +327,31 @@ describe('<lion-field>', () => {
       lionField.modelValue = 'cat';
       expect(lionField.error.required).to.be.undefined;
     });
+
+    it('will only update formattedValue the value when valid', async () => {
+      const formatterSpy = sinon.spy(value => `foo: ${value}`);
+      function isBarValidator(value) {
+        return { isBar: value === 'bar' };
+      }
+      const lionField = await fixture(html`
+        <${tag}
+          .modelValue=${'init-string'}
+          .formatter=${formatterSpy}
+          .errorValidators=${[[isBarValidator]]}
+        >${inputSlot}</${tag}>
+      `);
+
+      expect(formatterSpy.callCount).to.equal(0);
+      expect(lionField.formattedValue).to.equal('init-string');
+
+      lionField.modelValue = 'bar';
+      expect(formatterSpy.callCount).to.equal(1);
+      expect(lionField.formattedValue).to.equal('foo: bar');
+
+      lionField.modelValue = 'foo';
+      expect(formatterSpy.callCount).to.equal(1);
+      expect(lionField.formattedValue).to.equal('foo: bar');
+    });
   });
 
   describe(`Content projection${nameSuffix}`, () => {