diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts index f9001e090..49ed32de2 100644 --- a/src/designer/elsa-workflows-studio/src/components.d.ts +++ b/src/designer/elsa-workflows-studio/src/components.d.ts @@ -256,6 +256,7 @@ declare namespace LocalJSX { interface ElsaInputTags { "fieldId"?: string; "fieldName"?: string; + "onValueChanged"?: (event: CustomEvent>) => void; "placeHolder"?: string; "values"?: Array; } diff --git a/src/designer/elsa-workflows-studio/src/components/editors/controls/elsa-input-tags/elsa-input-tags.tsx b/src/designer/elsa-workflows-studio/src/components/editors/controls/elsa-input-tags/elsa-input-tags.tsx index 793b9b831..fa46dec5e 100644 --- a/src/designer/elsa-workflows-studio/src/components/editors/controls/elsa-input-tags/elsa-input-tags.tsx +++ b/src/designer/elsa-workflows-studio/src/components/editors/controls/elsa-input-tags/elsa-input-tags.tsx @@ -1,4 +1,4 @@ -import {Component, h, Prop, State} from '@stencil/core'; +import {Component, h, Prop, Event, EventEmitter} from '@stencil/core'; @Component({ tag: 'elsa-input-tags', @@ -11,8 +11,9 @@ export class ElsaInputTags { @Prop() fieldId?: string; @Prop() placeHolder?: string = 'Add tag'; @Prop() values?: Array = []; + @Event({bubbles: true}) valueChanged: EventEmitter>; - onInputKeyDown(e: KeyboardEvent) { + async onInputKeyDown(e: KeyboardEvent) { if (e.key != "Enter") return; @@ -28,6 +29,7 @@ export class ElsaInputTags { values.push(value); this.values = values.distinct(); input.value = ''; + await this.valueChanged.emit(values); } onDeleteTagClick(e: Event, tag: string) {