diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/index.ts new file mode 100644 index 0000000000..67d931325c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/index.ts @@ -0,0 +1,6 @@ +export class UmbPropertyValueChangeEvent extends Event { + public constructor() { + // mimics the native change event + super('property-value-change', { bubbles: true, composed: false, cancelable: false }); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts index 68729ad2e7..ed54c8c915 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts @@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui-input'; +import { UmbPropertyValueChangeEvent } from '../..'; export type MultipleTextStringConfigData = Array<{ alias: 'minNumber' | 'maxNumber'; @@ -65,16 +66,15 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends LitElement { private _onAdd() { this._value = [...this._value, { value: '' }]; - this.dispatchEvent(new CustomEvent('property-value-change')); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } private _onInput(event: UUIInputEvent) { const target = event.target as UUIInputElement; const value = target.value as string; const valueIndex = Number(target.dataset.valueIndex); - - this._value[valueIndex] = { value }; - this.dispatchEvent(new CustomEvent('property-value-change')); + this._value = this._value.map((item, index) => (index === valueIndex ? { value } : item)); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() {