fix: Set form value on manual value update (#914)

* fix: Set form value on manual value update

* Remove extra logic from gcds-select

Author: ethanWallace

packages/web/src/components/gcds-date-input/gcds-date-input.tsx

@@ -91,13 +91,18 @@ export class GcdsDateInput {
   validateValue() {
     if (this.value && !isValidDate(this.value)) {
       this.errors.push('value');
-      this.value = '';
+      this.value = null;
       console.error(
         `${i18n['en'].valueError}${i18n['en'][`valueFormat${this.format}`]} | ${i18n['fr'].valueError}${i18n['fr'][`valueFormat${this.format}`]}`,
       );
     } else if (this.errors.includes('value')) {
       this.errors.splice(this.errors.indexOf('value'), 1);
     }
+
+    if (this.value) {
+      this.splitFormValue();
+      this.internals.setFormValue(this.value);
+    }
   }
 
   /**

packages/web/src/components/gcds-input/gcds-input.tsx

@@ -129,6 +129,11 @@ export class GcdsInput {
    */
   @Prop({ mutable: true }) value?: string;
 
+  @Watch('value')
+  watchValue(val) {
+    this.internals.setFormValue(val ? val : null);
+  }
+
   /**
    * String to have autocomplete enabled.
    */

packages/web/src/components/gcds-select/gcds-select.tsx

@@ -90,6 +90,11 @@ export class GcdsSelect {
    */
   @Prop({ mutable: true }) value?: string;
 
+  @Watch('value')
+  watchValue(val) {
+    this.internals.setFormValue(val ? val : null);
+  }
+
   /**
    * Error message for an invalid select element.
    */
@@ -262,6 +267,7 @@ export class GcdsSelect {
 
     if (option.hasAttribute('selected')) {
       this.value = value;
+      this.internals.setFormValue(value);
       this.initialValue = this.value ? this.value : null;
     }
   }

packages/web/src/components/gcds-textarea/gcds-textarea.tsx

@@ -131,6 +131,7 @@ export class GcdsTextarea {
   @Watch('value')
   watchValue(val) {
     this.shadowElement.value = val;
+    this.internals.setFormValue(val ? val : null);
   }
 
   /**