diff --git a/packages/web/src/components/gcds-checkbox/gcds-checkbox.tsx b/packages/web/src/components/gcds-checkbox/gcds-checkbox.tsx index a74a72f48..a4cc913bf 100644 --- 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 index e55341385..5b8182480 100644 --- 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 index 872cfebcc..9e8c9e6a8 100644 --- 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 index d807f8f16..27843e2d6 100644 --- 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 index 9eb10c6b4..6c69c49e9 100644 --- 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 index 70043e6af..e03f87a6b 100644 --- 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