From 2e0bef3292d6f0edaf8ff0cbf028eacc104b762c Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Thu, 6 Aug 2026 14:59:57 +0300 Subject: [PATCH 1/2] feat(ui5-combobox, ui5-select): add public property for dropdown horizontal alignment --- packages/main/src/ComboBox.ts | 10 +++ packages/main/src/ComboBoxPopoverTemplate.tsx | 2 +- packages/main/src/Select.ts | 10 +++ packages/main/src/SelectPopoverTemplate.tsx | 2 +- packages/main/test/pages/ComboBox.html | 66 +++++++++++++++++++ 5 files changed, 88 insertions(+), 2 deletions(-) diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index af122d5e4feed..af4de5b0d5754 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -89,6 +89,7 @@ import "./ComboBoxItemGroup.js"; // eslint-disable-next-line import { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js"; import type ComboBoxFilter from "./types/ComboBoxFilter.js"; +import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js"; import type Input from "./Input.js"; import type { InputEventDetail } from "./Input.js"; import type { ListItemBaseClickEventDetail } from "./ListItemBase.js"; @@ -401,6 +402,15 @@ class ComboBox extends UI5Element implements IFormInputElement { @property({ type: Boolean }) showClearIcon = false; + /** + * Determines the horizontal alignment of the component's dropdown menu relative to the component. + * @default "Start" + * @public + * @since 2.26.0 + */ + @property() + horizontalAlign: `${PopoverHorizontalAlign}` = "Start"; + /** * Indicates whether the input is focused * @private diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx index 8373f4ced8b52..a50ab1b5f60c5 100644 --- a/packages/main/src/ComboBoxPopoverTemplate.tsx +++ b/packages/main/src/ComboBoxPopoverTemplate.tsx @@ -25,7 +25,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) { preventFocusRestore={true} preventInitialFocus={true} placement="Bottom" - horizontalAlign="Start" + horizontalAlign={this.horizontalAlign} accessibleName={this._popupLabel} onBeforeOpen={this._beforeOpenPopover} onOpen={this._afterOpenPopover} diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 0840e00556ad2..b31fb52e48e81 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -28,6 +28,7 @@ import { } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import SelectTextSeparator from "./types/SelectTextSeparator.js"; +import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js"; import "@ui5/webcomponents-icons/dist/error.js"; import "@ui5/webcomponents-icons/dist/alert.js"; import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; @@ -353,6 +354,15 @@ class Select extends UI5Element implements IFormInputElement { @property() textSeparator: `${SelectTextSeparator}` = "Dash"; + /** + * Determines the horizontal alignment of the component's dropdown menu relative to the component. + * @default "Start" + * @public + * @since 2.26.0 + */ + @property() + horizontalAlign: `${PopoverHorizontalAlign}` = "Start"; + /** * Constantly updated value of texts collected from the associated description texts * @private diff --git a/packages/main/src/SelectPopoverTemplate.tsx b/packages/main/src/SelectPopoverTemplate.tsx index a98ea8ee87d9a..27a47aebd179e 100644 --- a/packages/main/src/SelectPopoverTemplate.tsx +++ b/packages/main/src/SelectPopoverTemplate.tsx @@ -19,7 +19,7 @@ export default function SelectPopoverTemplate(this: Select) { part="popover" style={this.styles.responsivePopover} placement="Bottom" - horizontalAlign="Start" + horizontalAlign={this.horizontalAlign} hideArrow={true} preventInitialFocus={true} onOpen={this._afterOpen} diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index dae7010c1efc3..7490d0d8ef41c 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -921,6 +921,72 @@

Newline Normalization Test

+
+

Horizontal Align Property

+

Control the horizontal alignment of the dropdown menu relative to the ComboBox.

+
+ +
+
+ Start (default) - Left side: +
+ + + + + + + + + +
+ +
+ Center - Middle: +
+ + + + + + + + + +
+ +
+ End - Right side: +
+ + + + + + + + + +
+
+ +
+
+ Stretch - Matches ComboBox width: +
+ + + + + + + + + +
+
+
+ From f19383e3f6d2c22307e411e4a29291278641fc88 Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Thu, 6 Aug 2026 15:19:41 +0300 Subject: [PATCH 2/2] feat(ui5-combobox): add public horizontalAlign property for dropdown horizontal alignment --- packages/main/src/Select.ts | 10 ---------- packages/main/src/SelectPopoverTemplate.tsx | 2 +- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index b31fb52e48e81..0840e00556ad2 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -28,7 +28,6 @@ import { } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import SelectTextSeparator from "./types/SelectTextSeparator.js"; -import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js"; import "@ui5/webcomponents-icons/dist/error.js"; import "@ui5/webcomponents-icons/dist/alert.js"; import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; @@ -354,15 +353,6 @@ class Select extends UI5Element implements IFormInputElement { @property() textSeparator: `${SelectTextSeparator}` = "Dash"; - /** - * Determines the horizontal alignment of the component's dropdown menu relative to the component. - * @default "Start" - * @public - * @since 2.26.0 - */ - @property() - horizontalAlign: `${PopoverHorizontalAlign}` = "Start"; - /** * Constantly updated value of texts collected from the associated description texts * @private diff --git a/packages/main/src/SelectPopoverTemplate.tsx b/packages/main/src/SelectPopoverTemplate.tsx index 27a47aebd179e..a98ea8ee87d9a 100644 --- a/packages/main/src/SelectPopoverTemplate.tsx +++ b/packages/main/src/SelectPopoverTemplate.tsx @@ -19,7 +19,7 @@ export default function SelectPopoverTemplate(this: Select) { part="popover" style={this.styles.responsivePopover} placement="Bottom" - horizontalAlign={this.horizontalAlign} + horizontalAlign="Start" hideArrow={true} preventInitialFocus={true} onOpen={this._afterOpen}