fix(ui5-textarea): remove the cloning of the value state message

related to: #9347
SAP · Jul 5, 2024 · ed640a4 · ed640a4
1 parent 7901f7a
commit ed640a4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
@@ -395,7 +395,7 @@ class TextArea extends UI5Element implements IFormInputElement {
 
 	_onfocusout(e: FocusEvent) {
 		const eTarget = e.relatedTarget as HTMLElement;
-		const focusedOutToValueStateMessage = eTarget?.shadowRoot?.querySelector(".ui5-valuestatemessage-root");
+		const focusedOutToValueStateMessage = eTarget && this.contains(eTarget);
 
 		this.focused = false;
 
@@ -577,7 +577,7 @@ class TextArea extends UI5Element implements IFormInputElement {
 		}
 
 		if (this.hasCustomValueState) {
-			return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+			return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessage.map(el => el.textContent).join(" "));
 		}
 
 		return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
@@ -611,10 +611,6 @@ class TextArea extends UI5Element implements IFormInputElement {
 		return this.valueState === ValueState.Negative || this.valueState === ValueState.Critical || this.valueState === ValueState.Information;
 	}
 
-	get valueStateMessageText() {
-		return this.valueStateMessage.map(x => x.cloneNode(true));
-	}
-
 	get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
 		return this.effectiveDir !== "rtl" ? "Start" : "End";
 	}

diff --git a/packages/main/src/TextAreaPopover.hbs b/packages/main/src/TextAreaPopover.hbs
@@ -18,9 +18,7 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if hasCustomValueState}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{else}}
 		{{valueStateDefaultText}}
 	{{/if}}

diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html
@@ -54,7 +54,11 @@
 
 		<br>
 		<br>
-		<ui5-textarea rows="1" id="basic-textarea-error" placeholder="Placeholder" value-state="Negative"></ui5-textarea>
+		<ui5-textarea rows="1" id="basic-textarea-error" placeholder="Placeholder" value-state="Negative">
+			<div slot="valueStateMessage">
+				This is a random value state message text with a <a href="#" _target="blank">Link</a>.
+			</div>
+		</ui5-textarea>
 
 		<br>
 		<br>