diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/input/input-entity-data.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/input/input-entity-data.element.ts index 08514a7729..60debc93a8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/input/input-entity-data.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/input/input-entity-data.element.ts @@ -4,12 +4,14 @@ import { splitStringToArray, type UmbConfigCollectionModel } from '@umbraco-cms/ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; -import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import type { UmbRepositoryItemsStatus } from '@umbraco-cms/backoffice/repository'; import type { UmbItemModel } from '@umbraco-cms/backoffice/entity-item'; +import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; @customElement('umb-input-entity-data') -export class UmbInputEntityDataElement extends UUIFormControlMixin(UmbLitElement, '') { +export class UmbInputEntityDataElement extends UmbFormControlMixin( + UmbLitElement, +) { #sorter = new UmbSorterController(this, { getUniqueOfElement: (element) => { return element.id; @@ -95,12 +97,13 @@ export class UmbInputEntityDataElement extends UUIFormControlMixin(UmbLitElement return this.#pickerInputContext.getSelection(); } - @property() - public override set value(uniques: string) { - this.selection = splitStringToArray(uniques); + @property({ type: String }) + public override set value(selectionString: string | undefined) { + this.selection = splitStringToArray(selectionString); + super.value = selectionString; // Call the parent setter to ensure the value change is triggered in the FormControlMixin. [NL] } - public override get value(): string { - return this.selection.join(','); + public override get value(): string | undefined { + return this.selection.length > 0 ? this.selection.join(',') : undefined; } /** diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/property-editor/entity-data-picker-property-editor-ui.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/property-editor/entity-data-picker-property-editor-ui.element.ts index 71d5e95c7f..64a7ef4820 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/property-editor/entity-data-picker-property-editor-ui.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/property-editor/entity-data-picker-property-editor-ui.element.ts @@ -8,14 +8,14 @@ import type { UmbPropertyEditorUiElement, } from '@umbraco-cms/backoffice/property-editor'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; - -// import of local component -import '../input/input-entity-data.element.js'; import type { UmbConfigCollectionModel } from '@umbraco-cms/backoffice/utils'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import type { ManifestPropertyEditorDataSource } from '@umbraco-cms/backoffice/property-editor-data-source'; import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; +// import of local component +import '../input/input-entity-data.element.js'; + @customElement('umb-entity-data-picker-property-editor-ui') export class UmbEntityDataPickerPropertyEditorUIElement extends UmbFormControlMixin( @@ -111,9 +111,28 @@ export class UmbEntityDataPickerPropertyEditorUIElement return this.shadowRoot?.querySelector('umb-input-entity-data')?.focus(); } + override firstUpdated(changedProperties: Map) { + super.firstUpdated(changedProperties); + this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-entity-data')!); + + if (this._min && this._max && this._min > this._max) { + console.warn( + `Property (Entity Data Picker) has been misconfigured, 'min' is greater than 'max'. Please correct your data type configuration.`, + this, + ); + } + } + #onChange(event: CustomEvent & { target: UmbInputEntityDataElement }) { - this.value = event.target.selection; - this.dispatchEvent(new UmbChangeEvent()); + const selection = event.target.selection; + + // Ensure the value is of the correct type before setting it. + if (Array.isArray(selection)) { + this.value = selection; + this.dispatchEvent(new UmbChangeEvent()); + } else { + throw new Error('Selection is not of type array. Cannot set property value.'); + } } override render() {