From 6c3a09f05ba49f933f7c771d3e00a52f2eed686d Mon Sep 17 00:00:00 2001
From: Stanislav Bodurov <stbodurov@icloud.com>
Date: Mon, 15 Nov 2021 12:38:16 +0200
Subject: [PATCH] fix(ui5-input, ui5-multi-combobox): value state popup now
 aligned properly in RTL mode (#4310)

Fixes https://github.com/SAP/ui5-webcomponents/issues/4363
---
 packages/main/src/Input.js                 | 4 ++++
 packages/main/src/InputPopover.hbs         | 2 +-
 packages/main/src/MultiComboBox.js         | 4 ++++
 packages/main/src/MultiComboBoxPopover.hbs | 2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 5fa0d8ea98b3..36080517b550 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -1275,6 +1275,10 @@ class Input extends UI5Element {
 		return this.placeholder;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	/**
 	 * Returns the caret position inside the native input
 	 * @protected
diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
index c0714702edb7..01869a0ef6b4 100644
--- a/packages/main/src/InputPopover.hbs
+++ b/packages/main/src/InputPopover.hbs
@@ -71,7 +71,7 @@
 			no-arrow
 			class="ui5-valuestatemessage-popover"
 			placement-type="Bottom"
-			horizontal-align="Left"
+			horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 				{{> valueStateMessage}}
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index 9f50d262514e..d21987a633e4 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -852,6 +852,10 @@ class MultiComboBox extends UI5Element {
 		return (this._isFocusInside || this.open) && !this.readonly;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index baa7c4086f60..a8da642dd4ee 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -98,7 +98,7 @@
 		no-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			{{> valueStateMessage}}