Fix #19675 (#19891)

* clean up old stuff in validation form control mixin

* ensure validation trigger when value is changed

* Update src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts

@@ -324,15 +324,13 @@ export function UmbFormControlMixin<
 		 */
 		protected _runValidators() {
 			this.#validity = {};
-			//const messages: Set<string> = new Set();
 			let message: string | undefined = undefined;
 			let innerFormControlEl: UmbNativeFormControlElement | undefined = undefined;
 
 			// Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages) [NL]
 			this.#validators.some((validator) => {
 				if (validator.checkMethod()) {
 					this.#validity[validator.flagKey] = true;
-					//messages.add(validator.getMessageMethod());
 					message = validator.getMessageMethod();
 					return true;
 				}
@@ -362,13 +360,7 @@ export function UmbFormControlMixin<
 			this.#validity.valid = !hasError;
 
 			// Transfer the new validityState to the ElementInternals. [NL]
-			this._internals.setValidity(
-				this.#validity,
-				// Turn messages into an array and join them with a comma. [NL]:
-				//[...messages].join(', '),
-				message,
-				innerFormControlEl ?? this.getFormElement() ?? undefined,
-			);
+			this._internals.setValidity(this.#validity, message, innerFormControlEl ?? this.getFormElement() ?? undefined);
 
 			this.#dispatchValidationState();
 		}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts

@@ -95,6 +95,7 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 	@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 | undefined {
 		return this.selection.length > 0 ? this.selection.join(',') : undefined;

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts

@@ -119,6 +119,7 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
 	@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 | undefined {
 		return this.selection.length > 0 ? this.selection.join(',') : undefined;

src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts

@@ -88,6 +88,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
 	@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 | undefined {
 		return this.selection.length > 0 ? this.selection.join(',') : undefined;

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts

@@ -59,6 +59,7 @@ export class UmbInputContentElement extends UmbFormControlMixin<string | undefin
 	@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 | undefined {
 		return this.#selection.length > 0 ? this.#selection.join(',') : undefined;

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts

@@ -29,15 +29,6 @@ export class UmbPropertyEditorUIContentPickerElement
 	extends UmbFormControlMixin<UmbContentPickerValueType | undefined, typeof UmbLitElement>(UmbLitElement, undefined)
 	implements UmbPropertyEditorUiElement
 {
-	@property({ type: Array })
-	public override set value(value: UmbContentPickerValueType | undefined) {
-		this.#value = value;
-	}
-	public override get value(): UmbContentPickerValueType | undefined {
-		return this.#value;
-	}
-	#value?: UmbContentPickerValueType = [];
-
 	/**
 	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
 	 * @type {boolean}
@@ -94,7 +85,7 @@ export class UmbPropertyEditorUIContentPickerElement
 			this.#dynamicRoot = startNode.dynamicRoot;
 
 			// NOTE: Filter out any items that do not match the entity type. [LK]
-			this._invalidData = this.#value?.filter((x) => x.type !== this._rootEntityType);
+			this._invalidData = this.value?.filter((x) => x.type !== this._rootEntityType);
 			if (this._invalidData?.length) {
 				this.readonly = true;
 			}
@@ -119,7 +110,8 @@ export class UmbPropertyEditorUIContentPickerElement
 		return !isNaN(num) && num > 0 ? num : fallback;
 	}
 
-	override firstUpdated() {
+	override firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
+		super.firstUpdated(changedProperties);
 		this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-content')!);
 		this.#setPickerRootUnique();