diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index af122d5e4fee..af4de5b0d575 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 8373f4ced8b5..a50ab1b5f60c 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/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index dae7010c1efc..7490d0d8ef41 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: +
+ + + + + + + + + +
+
+
+