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

Make pickers value undefined when empty

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;
 	}
 

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

@@ -171,7 +171,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts

@@ -123,7 +123,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 		this._input?.focus();
 	}
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts

@@ -71,7 +71,7 @@ export class UmbInputMultipleTextStringItemElement extends UUIFormControlMixin(U
 		this._input?.focus();
 	}
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/core/culture/components/input-culture-select/input-culture-select.element.ts

@@ -36,7 +36,7 @@ export class UmbInputCultureSelectElement extends UUIFormControlMixin(UmbLitElem
 
 	#cultureRepository = new UmbCultureRepository(this);
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/core/localization/components/ui-culture-input/ui-culture-input.element.ts

@@ -55,7 +55,7 @@ export class UmbUiCultureInputElement extends UUIFormControlMixin(UmbLitElement,
 			}));
 	}
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return this._selectElement;
 	}
 

src/packages/core/picker-input/picker-input.context.ts

@@ -8,7 +8,7 @@ import type { UmbModalToken, UmbPickerModalData, UmbPickerModalValue } from '@um
 
 type PickerItemBaseType = { name: string; unique: string };
 export class UmbPickerInputContext<
-	PickedItemType extends PickerItemBaseType,
+	PickedItemType extends PickerItemBaseType = PickerItemBaseType,
 	PickerItemType extends PickerItemBaseType = PickedItemType,
 	PickerModalConfigType extends UmbPickerModalData<PickerItemType> = UmbPickerModalData<PickerItemType>,
 	PickerModalValueType extends UmbPickerModalValue = UmbPickerModalValue,

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

@@ -1,12 +1,14 @@
 import type { UmbSectionItemModel } from '../../repository/index.js';
 import { UmbSectionPickerContext } from './input-section.context.js';
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-section')
-export class UmbInputSectionElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputSectionElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+	UmbLitElement,
+) {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -60,15 +62,12 @@ export class UmbInputSectionElement extends UUIFormControlMixin(UmbLitElement, '
 		return this.#pickerContext.getSelection();
 	}
 
-	@property()
-	public override set value(selectionString: string) {
-		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		if (typeof selectionString !== 'string') return;
-		if (selectionString === this.value) return;
+	@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;
 	}
 
 	@state()
@@ -95,7 +94,7 @@ export class UmbInputSectionElement extends UUIFormControlMixin(UmbLitElement, '
 		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
 	}
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts

@@ -16,7 +16,7 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
  */
 @customElement('umb-data-type-flow-input')
 export class UmbInputDataTypeElement extends UUIFormControlMixin(UmbLitElement, '') {
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/data-type/components/data-type-input/data-type-input.context.ts

@@ -1,15 +1,16 @@
+import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
 import type { UmbDataTypeItemModel } from '../../repository/item/types.js';
-import type { UmbDataTypePickerModalData } from '../../modals/index.js';
+import type { UmbDataTypePickerModalData, UmbDataTypePickerModalValue } from '../../modals/index.js';
 import { UMB_DATA_TYPE_PICKER_MODAL } from '../../modals/index.js';
 import type { UmbDataTypeTreeItemModel } from '../../tree/types.js';
-import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbDataTypePickerContext extends UmbPickerInputContext<
 	UmbDataTypeItemModel,
 	UmbDataTypeTreeItemModel,
-	UmbDataTypePickerModalData
+	UmbDataTypePickerModalData,
+	UmbDataTypePickerModalValue
 > {
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS, UMB_DATA_TYPE_PICKER_MODAL);

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

@@ -113,7 +113,7 @@ export class UmbDataTypeInputElement extends UUIFormControlMixin(UmbLitElement,
 		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observerItems');
 	}
 
-	protected getFormElement() {
+	protected override getFormElement() {
 		return undefined;
 	}
 

src/packages/data-type/components/ref-data-type/ref-data-type.element.ts

@@ -1,8 +1,8 @@
-import { UmbDataTypeDetailRepository } from '../../repository/detail/data-type-detail.repository.js';
 import { UUIIconRequestEvent, UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
 import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbDataTypeDetailRepository } from '../../repository/detail/data-type-detail.repository.js';
 
 /**
  *  @element umb-ref-data-type

src/packages/dictionary/components/input-dictionary/input-dictionary.context.ts

@@ -1,13 +1,19 @@
+import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_DICTIONARY_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
 import { UMB_DICTIONARY_PICKER_MODAL } from '../../modals/dictionary-picker-modal.token.js';
 import type { UmbDictionaryItemModel } from '../../repository/index.js';
 import type { UmbDictionaryTreeItemModel } from '../../tree/types.js';
-import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type {
+	UmbDictionaryPickerModalData,
+	UmbDictionaryPickerModalValue,
+} from '../../modals/dictionary-picker-modal.token.js';
 
 export class UmbDictionaryPickerContext extends UmbPickerInputContext<
 	UmbDictionaryItemModel,
-	UmbDictionaryTreeItemModel
+	UmbDictionaryTreeItemModel,
+	UmbDictionaryPickerModalData,
+	UmbDictionaryPickerModalValue
 > {
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_DICTIONARY_ITEM_REPOSITORY_ALIAS, UMB_DICTIONARY_PICKER_MODAL);

src/packages/dictionary/index.ts

@@ -1,4 +1,4 @@
 export * from './repository/index.js';
 export * from './tree/index.js';
+export * from './modals/dictionary-picker-modal.token.js';
 export * from './entity.js';
-export { UMB_DICTIONARY_PICKER_MODAL } from './modals/dictionary-picker-modal.token.js';

src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts

@@ -104,7 +104,7 @@ export class UmbInputDocumentTypeElement extends UmbFormControlMixin<string | un
 		return this.#pickerContext.getSelection();
 	}
 
-	@property()
+	@property({ type: String })
 	public override set value(uniques: string | undefined) {
 		this.selection = splitStringToArray(uniques);
 	}

src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts

@@ -44,7 +44,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
 			<umb-input-document-type
 				.min=${this.min}
 				.max=${this.max}
-				.value=${this.value ?? ''}
+				.value=${this.value}
 				?elementTypesOnly=${this.onlyElementTypes}
 				?showOpenButton=${this.showOpenButton}
 				@change=${this.#onChange}>