From 4b4c9e927ed45667d710f4abdec3c66cff0010dc Mon Sep 17 00:00:00 2001
From: Nia Peeva <nia.peeva@sap.com>
Date: Mon, 29 Nov 2021 13:05:29 +0200
Subject: [PATCH] fix(ui5-combobox, ui5-textarea): Value state message
 correctly positioned in rtl mode

---
 packages/main/src/ComboBox.js         | 4 ++++
 packages/main/src/ComboBoxPopover.hbs | 1 +
 packages/main/src/TextArea.js         | 4 ++++
 packages/main/src/TextAreaPopover.hbs | 2 +-
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
index 3135ae52ff9a..a0987676c2b2 100644
--- a/packages/main/src/ComboBox.js
+++ b/packages/main/src/ComboBox.js
@@ -958,6 +958,10 @@ class ComboBox extends UI5Element {
 		return !this.valueStateMessage.length && this.hasValueStateText;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	/**
 	 * This method is relevant for sap_horizon theme only
 	 */
diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
index 0698dacf020e..597fe54508d6 100644
--- a/packages/main/src/ComboBoxPopover.hbs
+++ b/packages/main/src/ComboBoxPopover.hbs
@@ -105,6 +105,7 @@
 		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		placement-type="Bottom"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
index a8e15c84956f..4a255146b4ba 100644
--- a/packages/main/src/TextArea.js
+++ b/packages/main/src/TextArea.js
@@ -655,6 +655,10 @@ class TextArea extends UI5Element {
 		return this.valueStateTextMappings()[this.valueState];
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	/**
 	 * This method is relevant for sap_horizon theme only
 	 */
diff --git a/packages/main/src/TextAreaPopover.hbs b/packages/main/src/TextAreaPopover.hbs
index 824ad8c93f10..f5daf4b6c6a6 100644
--- a/packages/main/src/TextAreaPopover.hbs
+++ b/packages/main/src/TextAreaPopover.hbs
@@ -8,7 +8,7 @@
 		class="ui5-valuestatemessage-popover"
 		style="{{styles.valueStateMsgPopover}}"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>