fix: converts the property-editor-ui-textarea to a form mixin

Author: iOvergaard

src/packages/property-editors/textarea/property-editor-ui-textarea.element.ts

@@ -1,16 +1,17 @@
-import { css, customElement, html, property, state, styleMap } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, ifDefined, property, state, styleMap } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { StyleInfo } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import type { UUITextareaElement } from '@umbraco-cms/backoffice/external/uui';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 @customElement('umb-property-editor-ui-textarea')
-export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property()
-	value = '';
-
+export class UmbPropertyEditorUITextareaElement
+	extends UmbFormControlMixin<string>(UmbLitElement, undefined)
+	implements UmbPropertyEditorUiElement
+{
 	/**
 	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
 	 * @type {boolean}
@@ -47,8 +48,14 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements
 		};
 	}
 
-	#onInput(event: InputEvent & { target: UUITextareaElement }) {
-		this.value = event.target.value as string;
+	protected override firstUpdated(): void {
+		this.addFormControlElement(this.shadowRoot!.querySelector('uui-textarea')!);
+	}
+
+	#onInput(event: InputEvent) {
+		const newValue = (event.target as HTMLTextAreaElement).value;
+		if (newValue === this.value) return;
+		this.value = newValue;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
@@ -58,15 +65,16 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements
 				label="Textarea"
 				style=${styleMap(this._css)}
 				.autoHeight=${this._rows ? false : true}
-				.maxlength=${this._maxChars}
-				.rows=${this._rows}
+				maxlength=${ifDefined(this._maxChars)}
+				rows=${ifDefined(this._rows)}
 				.value=${this.value ?? ''}
 				@input=${this.#onInput}
 				?readonly=${this.readonly}></uui-textarea>
 		`;
 	}
 
-	static override styles = [
+	static styles = [
+		UmbTextStyles,
 		css`
 			uui-textarea {
 				width: 100%;