fix(ui5-input, ui5-multi-combobox): value state popup now aligned pro…

…perly in RTL mode (#4310) Fixes #4363
SAP · Nov 23, 2021 · 6c3a09f · 6c3a09f
1 parent 6654a6f
commit 6c3a09f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}}