Merge pull request #2018 from umbraco/v14/bugfix/pickers-undefined-value

Make pickers value undefined when empty

Author: nielslyngsoe

src/packages/block/block-type/components/input-block-type/input-block-type.element.ts

@@ -1,5 +1,3 @@
-import type { UmbBlockTypeCardElement } from '../block-type-card/index.js';
-import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../../types.js';
 import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
@@ -12,6 +10,8 @@ import {
 	UMB_DOCUMENT_TYPE_PICKER_MODAL,
 } from '@umbraco-cms/backoffice/document-type';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../../types.js';
+import type { UmbBlockTypeCardElement } from '../block-type-card/index.js';
 
 import '../block-type-card/index.js';
 
@@ -123,10 +123,6 @@ export class UmbInputBlockTypeElement<
 		this.dispatchEvent(new UmbDeleteEvent());
 	}
 
-	protected getFormElement() {
-		return undefined;
-	}
-
 	async #onRequestDelete(item: BlockType) {
 		const store = await this.getContext(UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT);
 		const contentType = store.getItems([item.contentElementTypeKey]);

src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts

@@ -10,7 +10,7 @@ import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/rou
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-collection-configuration')
-export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin(UmbLitElement) {
+export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin<string, typeof UmbLitElement>(UmbLitElement) {
 	protected override getFormElement() {
 		return undefined;
 	}
@@ -25,7 +25,7 @@ export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin(
 	@property({ attribute: 'default-value' })
 	defaultValue?: string;
 
-	#setValue(value: string) {
+	#setValue(value: string | undefined) {
 		this.value = value;
 		this.dispatchEvent(new UmbChangeEvent());
 	}
@@ -65,7 +65,7 @@ export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin(
 	}
 
 	#clearDataType() {
-		this.#setValue('');
+		this.#setValue(undefined);
 	}
 
 	#createDataType() {
@@ -99,7 +99,7 @@ export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin(
 		if (!this.value || !this._dataTypePickerModalPath) return nothing;
 		return html`
 			<uui-ref-list>
-				<umb-ref-data-type standalone data-type-id=${this.value as string} @open=${this.#editDataType}>
+				<umb-ref-data-type standalone data-type-id=${this.value} @open=${this.#editDataType}>
 					<uui-action-bar slot="actions">
 						<uui-button
 							label=${this.localize.term('general_choose')}

src/packages/core/components/input-color/input-color.element.ts

@@ -11,7 +11,7 @@ import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui
  */
 @customElement('umb-input-color')
 export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') {
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/core/components/input-date/input-date.element.ts

@@ -15,7 +15,7 @@ import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
  */
 @customElement('umb-input-date')
 export class UmbInputDateElement extends UUIFormControlMixin(UmbLitElement, '') {
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/core/components/input-dropdown/input-dropdown-list.element.ts

@@ -19,7 +19,7 @@ export class UmbInputDropdownListElement extends UUIFormControlMixin(UmbLitEleme
 	@query('uui-select')
 	private selectEle!: HTMLInputElement;
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return this.selectEle;
 	}
 

src/packages/core/components/input-entity/input-entity.element.ts

@@ -3,13 +3,15 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 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 { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 import type { UmbUniqueItemModel } from '@umbraco-cms/backoffice/models';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-entity')
-export class UmbInputEntityElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputEntityElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+	UmbLitElement,
+) {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
 			return element.id;
@@ -26,7 +28,7 @@ export class UmbInputEntityElement extends UUIFormControlMixin(UmbLitElement, ''
 		},
 	});
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 
@@ -68,20 +70,20 @@ export class UmbInputEntityElement extends UUIFormControlMixin(UmbLitElement, ''
 		this.#pickerContext?.setSelection(uniques);
 		this.#sorter.setModel(uniques);
 	}
-	public get selection(): Array<string> | undefined {
-		return this.#pickerContext?.getSelection();
+	public get selection(): Array<string> {
+		return this.#pickerContext?.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);
 	}
-	public override get value(): string {
-		return this.selection?.join(',') ?? '';
+	public override get value(): string | undefined {
+		return this.selection.length > 0 ? this.selection.join(',') : undefined;
 	}
 
 	@property({ attribute: false })
-	public set pickerContext(ctor: new (host: UmbControllerHost) => UmbPickerInputContext<any>) {
+	public set pickerContext(ctor: new (host: UmbControllerHost) => UmbPickerInputContext<any, any, any, any>) {
 		if (this.#pickerContext) return;
 		this.#pickerContext = new ctor(this);
 		this.#observePickerContext();
@@ -90,7 +92,7 @@ export class UmbInputEntityElement extends UUIFormControlMixin(UmbLitElement, ''
 	@state()
 	private _items?: Array<UmbUniqueItemModel>;
 
-	#pickerContext?: UmbPickerInputContext<any>;
+	#pickerContext?: UmbPickerInputContext;
 
 	constructor() {
 		super();

src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts

@@ -6,7 +6,7 @@ import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external
 
 @customElement('umb-input-eye-dropper')
 export class UmbInputEyeDropperElement extends UUIFormControlMixin(UmbLitElement, '') {
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts

@@ -21,7 +21,7 @@ export class UmbInputRadioButtonListElement extends UUIFormControlMixin(UmbLitEl
 	@property({ type: Array })
 	public list: Array<UmbRadioButtonItem> = [];
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/core/components/input-slider/input-slider.element.ts

@@ -24,7 +24,7 @@ export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, ''
 	@property({ type: Boolean, attribute: 'enable-range' })
 	enableRange = false;
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/core/components/input-toggle/input-toggle.element.ts

@@ -29,7 +29,7 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, ''
 	@state()
 	_currentLabel?: string;
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}