fix: Emit change event from form components (#523)

fix: Emit change event
cds-snc · May 13, 2024 · d956370 · d956370
1 parent f154fb2
commit d956370
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 2 deletions.
diff --git a/packages/web/src/components/gcds-checkbox/gcds-checkbox.tsx b/packages/web/src/components/gcds-checkbox/gcds-checkbox.tsx
@@ -315,6 +315,9 @@ export class GcdsCheckbox {
       this.internals.setFormValue(null, 'checked');
     }
 
+    const changeEvt = new e.constructor(e.type, e);
+    this.el.dispatchEvent(changeEvt);
+
     this.gcdsChange.emit(this.checked);
   };
 

diff --git a/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx b/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx
@@ -204,6 +204,11 @@ export class GcdsFileUploader {
       }, 100);
     }
 
+    if (e.type === 'change') {
+      const changeEvt = new e.constructor(e.type, e);
+      this.el.dispatchEvent(changeEvt);
+    }
+
     customEvent.emit(this.value);
   };
 

diff --git a/packages/web/src/components/gcds-input/gcds-input.tsx b/packages/web/src/components/gcds-input/gcds-input.tsx
@@ -197,8 +197,13 @@ export class GcdsInput {
     this.value = val;
     this.internals.setFormValue(val ? val : null);
 
+    if (e.type === 'change') {
+      const changeEvt = new e.constructor(e.type, e);
+      this.el.dispatchEvent(changeEvt);
+    }
+
     customEvent.emit(this.value);
-  }
+  };
 
   /**
    * Emitted when the input has changed.

diff --git a/packages/web/src/components/gcds-radio-group/gcds-radio-group.tsx b/packages/web/src/components/gcds-radio-group/gcds-radio-group.tsx
@@ -140,6 +140,9 @@ export class GcdsRadioGroup {
   private onChange = e => {
     this.gcdsChange.emit(e.target.value);
     this.internals.setFormValue(e.target.value, 'checked');
+
+    const changeEvt = new e.constructor(e.type, e);
+    this.el.dispatchEvent(changeEvt);
   };
 
   /**

diff --git a/packages/web/src/components/gcds-select/gcds-select.tsx b/packages/web/src/components/gcds-select/gcds-select.tsx
@@ -173,6 +173,11 @@ export class GcdsSelect {
     this.value = val;
     this.internals.setFormValue(val);
 
+    if (e.type === 'change') {
+      const changeEvt = new e.constructor(e.type, e);
+      this.el.dispatchEvent(changeEvt);
+    }
+
     customEvent.emit(this.value);
   };
 

diff --git a/packages/web/src/components/gcds-textarea/gcds-textarea.tsx b/packages/web/src/components/gcds-textarea/gcds-textarea.tsx
@@ -201,8 +201,13 @@ export class GcdsTextarea {
     this.value = val;
     this.internals.setFormValue(val ? val : null);
 
+    if (e.type === 'change') {
+      const changeEvt = new e.constructor(e.type, e);
+      this.el.dispatchEvent(changeEvt);
+    }
+
     customEvent.emit(this.value);
-  }
+  };
 
   /**
    * Call any active validators