From ca929e3fe005ba4fb1f9ced8154aae6b299db1ac Mon Sep 17 00:00:00 2001
From: Guillaume Cusnieux <guillaume.cusnieux@graviteesource.com>
Date: Wed, 2 Jun 2021 08:22:22 +0200
Subject: [PATCH] fix(gv-schema-form-control): update simple properties when is
 required

---
 src/organisms/gv-schema-form-control.js | 35 ++++++++++++++++++-------
 src/organisms/gv-schema-form.js         | 18 ++++++-------
 stories/resources/schemas/mixed.json    |  2 +-
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/organisms/gv-schema-form-control.js b/src/organisms/gv-schema-form-control.js
index 61388777..2b06a727 100644
--- a/src/organisms/gv-schema-form-control.js
+++ b/src/organisms/gv-schema-form-control.js
@@ -46,6 +46,13 @@ export class GvSchemaFormControl extends LitElement {
     };
   }
 
+  constructor() {
+    super();
+    // When form has errors, the control is not update to conserve the error state.
+    // This list is used to force the update of properties even in error case.
+    this._observedProperties = ['disabled', 'readonly', 'required'];
+  }
+
   isExpressionLanguage() {
     return this.control['x-schema-form'] && this.control['x-schema-form']['expression-language'] != null;
   }
@@ -97,12 +104,22 @@ export class GvSchemaFormControl extends LitElement {
     return this.control.type === 'array' && !this.control.items.enum;
   }
 
+  _updateProperties(element) {
+    if (element != null) {
+      this._observedProperties.forEach((property) => {
+        if (this[property] != null) {
+          element[property] = this[property];
+        }
+      });
+    }
+  }
+
   _renderControl() {
     const elementName = this.getElementName();
     const element = document.createElement(elementName);
-    element.skeleton = this.skeleton;
     element.id = this.id;
     element.name = this.id;
+    element.skeleton = this.skeleton;
     element.classList.add('form__control');
 
     if (this.value != null) {
@@ -121,15 +138,9 @@ export class GvSchemaFormControl extends LitElement {
     } else if (this.isComplexArray()) {
       element.schema = this.control.items;
     }
-    if (this.required != null) {
-      element.required = this.required;
-    }
-    if (this.disabled != null) {
-      element.disabled = this.disabled;
-    }
-    if (this.readonly != null) {
-      element.readonly = this.readonly;
-    }
+
+    this._updateProperties(element);
+
     if (this.control.title) {
       element.label = this.control.title;
       element.title = this.control.title;
@@ -269,6 +280,10 @@ export class GvSchemaFormControl extends LitElement {
   }
 
   shouldUpdate(changedProperties) {
+    if (this._observedProperties.find((property) => changedProperties.has(property)) != null) {
+      this._updateProperties(this.getControl());
+    }
+
     if (changedProperties.has('errors') && this.errors != null) {
       // Set errors to complex controls
       this.getControls().forEach((control) => {
diff --git a/src/organisms/gv-schema-form.js b/src/organisms/gv-schema-form.js
index 0697c973..d116c0f2 100644
--- a/src/organisms/gv-schema-form.js
+++ b/src/organisms/gv-schema-form.js
@@ -235,13 +235,7 @@ export class GvSchemaForm extends LitElement {
     // This is require to clean cache of <gv-schema-form-control>
     const control = { ...this.schema.properties[key] };
     const isRequired = this.schema.required && this.schema.required.includes(key);
-
-    let isDisabled = this.schema.disabled && this.schema.disabled.includes(key);
-    const condition = control['x-schema-form'] && control['x-schema-form'].disabled;
-    if (!isDisabled && condition) {
-      // test 'x-scheam-form.disabled' only if the field isn't explicitly defined into the 'disabled' array
-      isDisabled = this._evaluateDisabledCondition(condition);
-    }
+    const isDisabled = (this.schema.disabled && this.schema.disabled.includes(key)) || this._evaluateCondition(control, 'disabled');
 
     const value = get(this._values, key);
     return html`<gv-schema-form-control
@@ -256,10 +250,14 @@ export class GvSchemaForm extends LitElement {
     ></gv-schema-form-control>`;
   }
 
-  _evaluateDisabledCondition(condition) {
+  _evaluateCondition(control, conditionKey) {
+    if (control['x-schema-form'] == null || control['x-schema-form'][conditionKey] == null) {
+      return false;
+    }
+    const condition = control['x-schema-form'][conditionKey];
     if (!Array.isArray(condition)) {
       // condition isn't an array, ignore the condition
-      console.warn("'disable' attribute of 'x-schema-form' should be an array");
+      console.warn(`'${conditionKey}' attribute of 'x-schema-form' should be an array`);
       return false;
     }
 
@@ -281,7 +279,7 @@ export class GvSchemaForm extends LitElement {
           result = result && this._evaluateDefCondition(operation);
           break;
         default:
-          console.warn("Unsupported operator '" + operator + "' on disable condition");
+          console.warn(`Unsupported operator '${operator}' on disable condition`);
           result = false;
           break;
       }
diff --git a/stories/resources/schemas/mixed.json b/stories/resources/schemas/mixed.json
index b737e194..e494c63f 100644
--- a/stories/resources/schemas/mixed.json
+++ b/stories/resources/schemas/mixed.json
@@ -145,7 +145,7 @@
       }
     },
     "disabled": {
-      "title": "Disbaled field if 'Simple select' is 'a'",
+      "title": "Disabled field if 'Simple select' is 'a'",
       "type": "string",
       "x-schema-form": {
         "disabled": [{ "$def": "select" }, { "$eq": { "select": "a" } }]