@ui5/webcomponents 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/ComboBox.d.ts

@@ -8,13 +8,13 @@ import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type { IIcon } from "./Icon.js";
 import ComboBoxItem from "./ComboBoxItem.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import type { ListItemClickEventDetail } from "./List.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
-import type FormSupportT from "./features/InputElementsFormSupport.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import { InputEventDetail } from "./Input.js";
 /**
@@ -24,10 +24,12 @@ import { InputEventDetail } from "./Input.js";
 interface IComboBoxItem extends UI5Element {
     text: string;
     focused: boolean;
-    isGroupItem: boolean;
+    isGroupItem?: boolean;
     selected?: boolean;
     additionalText?: string;
     stableDomRef: string;
+    _isVisible?: boolean;
+    items?: Array<IComboBoxItem>;
 }
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type ValueStateTypeAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
@@ -72,7 +74,7 @@ type ComboBoxSelectionChangeEventDetail = {
  * @public
  * @since 1.0.0-rc.6
  */
-declare class ComboBox extends UI5Element {
+declare class ComboBox extends UI5Element implements IFormInputElement {
     /**
      * Defines the value of the component.
      * @default ""
@@ -81,6 +83,15 @@ declare class ComboBox extends UI5Element {
      * @public
      */
     value: string;
+    /**
+     * Determines the name by which the component will be identified upon submission in an HTML form.
+     *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default ""
+     * @public
+     * @since 2.0.0
+     */
+    name: string;
     /**
      * Defines whether the value will be autocompleted to match an item
      * @default false
@@ -214,8 +225,11 @@ declare class ComboBox extends UI5Element {
     _userTypedValue: string;
     responsivePopover?: ResponsivePopover;
     valueStatePopover?: Popover;
-    FormSupport?: typeof FormSupportT;
     static i18nBundle: I18nBundle;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): string;
     constructor();
     onBeforeRendering(): Promise<void>;
     get iconsCount(): number;
@@ -232,12 +246,14 @@ declare class ComboBox extends UI5Element {
     closeValueStatePopover(): Promise<void>;
     _getValueStatePopover(): Promise<Popover>;
     _resetFilter(): void;
+    _resetItemVisibility(): void;
     _arrowClick(): void;
     _handleMobileInput(e: CustomEvent<InputEventDetail>): void;
     _input(e: InputEvent): void;
     shouldAutocomplete(e: InputEvent): boolean;
     _startsWithMatchingItems(str: string): Array<IComboBoxItem>;
     _clearFocus(): void;
+    _getItems(): IComboBoxItem[];
     handleNavKeyPress(e: KeyboardEvent): void;
     _handleItemNavigation(e: KeyboardEvent, indexOfItem: number, isForward: boolean): void;
     _handleArrowDown(e: KeyboardEvent, indexOfItem: number): void;
@@ -252,13 +268,8 @@ declare class ComboBox extends UI5Element {
     _closeRespPopover(e?: Event): void;
     _openRespPopover(): Promise<void>;
     _filterItems(str: string): IComboBoxItem[];
-    /**
-     * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
-     * @private
-     */
-    static _groupItemFilter(item: IComboBoxItem, idx: number, allItems: Array<IComboBoxItem>, filteredItems: Array<IComboBoxItem>): boolean | undefined;
-    _getFirstMatchingItem(current: string): ComboBoxItem | undefined;
-    _applyAtomicValueAndSelection(item: ComboBoxItem, filterValue: string, highlightValue: boolean): void;
+    _getFirstMatchingItem(current: string): IComboBoxItem | void;
+    _applyAtomicValueAndSelection(item: IComboBoxItem, filterValue: string, highlightValue: boolean): void;
     _selectMatchingItem(): void;
     _fireChangeEvent(): void;
     _inputChange(e: Event): void;
@@ -267,6 +278,7 @@ declare class ComboBox extends UI5Element {
     _onItemFocus(): void;
     _announceSelectedItem(indexOfItem: number): void;
     _clear(): void;
+    _makeAllVisible(item: IComboBoxItem): void;
     _scrollToItem(indexOfItem: number, forward: boolean): Promise<void>;
     _announceValueStateText(): void;
     get _headerTitleText(): string;

package/dist/ComboBox.js

@@ -27,10 +27,10 @@ import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import { isBackSpace, isDelete, isShow, isUp, isDown, isEnter, isEscape, isTabNext, isTabPrevious, isPageUp, isPageDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
 import * as Filters from "./Filters.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import ComboBoxTemplate from "./generated/templates/ComboBoxTemplate.lit.js";
 // Styles
@@ -47,7 +47,8 @@ import List from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
 import StandardListItem from "./StandardListItem.js";
-import ComboBoxGroupItem from "./ComboBoxGroupItem.js";
+import ComboBoxItemGroup, { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js";
+import ListItemGroup from "./ListItemGroup.js";
 import ListItemGroupHeader from "./ListItemGroupHeader.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
@@ -100,6 +101,18 @@ var ValueStateIconMapping;
  * @since 1.0.0-rc.6
  */
 let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
+    get formValidityMessage() {
+        return ComboBox_1.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+    }
+    get formValidity() {
+        return { valueMissing: this.required && !this.value };
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value;
+    }
     constructor() {
         super();
         this._filteredItems = [];
@@ -115,17 +128,22 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     async onBeforeRendering() {
         const popover = this.valueStatePopover;
-        this.FormSupport = getFeature("FormSupport");
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
         if (this._initialRendering || this.filter === "None") {
             this._filteredItems = this.items;
         }
         if (this.open && !this._isKeyNavigation) {
             const items = this._filterItems(this.filterValue);
-            this._filteredItems = items.length ? items : this.items;
+            this._filteredItems = (items.length && items) || [];
         }
-        if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length) {
-            popover?.close();
+        const hasNoVisibleItems = !this._filteredItems.length || !this._filteredItems.some(i => i._isVisible);
+        // If there is no filtered items matching the value, show all items when the arrow is pressed
+        if (((hasNoVisibleItems && !isPhone()) && this.value)) {
+            this.items.forEach(this._makeAllVisible.bind(this));
+            this._filteredItems = this.items;
+        }
+        if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length && popover) {
+            popover.open = false;
         }
         this._selectMatchingItem();
         this._initialRendering = false;
@@ -144,7 +162,8 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     async onAfterRendering() {
         const picker = await this._getPicker();
         if ((await this.shouldClosePopover()) && !isPhone()) {
-            picker.close(false, false, true);
+            picker.preventFocusRestore = true;
+            picker.open = false;
             this._clearFocus();
             this._itemFocused = false;
         }
@@ -223,10 +242,17 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
     }
     async openValueStatePopover() {
-        (await this._getValueStatePopover())?.showAt(this);
+        const valueStatePopover = await this._getValueStatePopover();
+        if (valueStatePopover) {
+            valueStatePopover.opener = this;
+            valueStatePopover.open = true;
+        }
     }
     async closeValueStatePopover() {
-        (await this._getValueStatePopover())?.close();
+        const valueStatePopover = await this._getValueStatePopover();
+        if (valueStatePopover) {
+            valueStatePopover.open = false;
+        }
     }
     async _getValueStatePopover() {
         await renderFinished();
@@ -242,6 +268,17 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._filteredItems = this._filterItems("");
         this._selectMatchingItem();
     }
+    _resetItemVisibility() {
+        this.items.forEach(item => {
+            if (isInstanceOfComboBoxItemGroup(item)) {
+                item.items?.forEach(i => {
+                    i._isVisible = false;
+                });
+                return;
+            }
+            item._isVisible = false;
+        });
+    }
     _arrowClick() {
         this.inner.focus();
         this._resetFilter();
@@ -275,7 +312,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             item && this._applyAtomicValueAndSelection(item, value, true);
             if (value !== "" && (item && !item.selected && !item.isGroupItem)) {
                 this.fireEvent("selection-change", {
-                    item,
+                    item: item,
                 });
             }
         }
@@ -310,28 +347,44 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return !this.noTypeahead && !allowedEventTypes.includes(eventType);
     }
     _startsWithMatchingItems(str) {
-        return Filters.StartsWith(str, this._filteredItems, "text");
+        const allItems = this._getItems();
+        return Filters.StartsWith(str, allItems, "text");
     }
     _clearFocus() {
-        this._filteredItems.map(item => {
+        const allItems = this._getItems();
+        allItems.map(item => {
             item.focused = false;
             return item;
         });
     }
+    // Get groups and items as a flat array for filtering
+    _getItems() {
+        const allItems = [];
+        this._filteredItems.forEach(item => {
+            if (isInstanceOfComboBoxItemGroup(item)) {
+                const groupedItems = [item, ...item.items];
+                allItems.push(...groupedItems);
+                return;
+            }
+            allItems.push(item);
+        });
+        return allItems;
+    }
     handleNavKeyPress(e) {
+        const allItems = this._getItems();
         if (this.focused && (isHome(e) || isEnd(e)) && this.value) {
             return;
         }
         const isOpen = this.open;
-        const currentItem = this._filteredItems.find(item => {
+        const currentItem = allItems.find(item => {
             return isOpen ? item.focused : item.selected;
         });
-        const indexOfItem = currentItem ? this._filteredItems.indexOf(currentItem) : -1;
+        const indexOfItem = currentItem ? allItems.indexOf(currentItem) : -1;
         e.preventDefault();
         if (this.focused && isOpen && (isUp(e) || isPageUp(e) || isPageDown(e))) {
             return;
         }
-        if (this._filteredItems.length - 1 === indexOfItem && isDown(e)) {
+        if (allItems.length - 1 === indexOfItem && isDown(e)) {
             return;
         }
         this._isKeyNavigation = true;
@@ -345,10 +398,11 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
     }
     _handleItemNavigation(e, indexOfItem, isForward) {
+        const allItems = this._getItems();
         const isOpen = this.open;
-        const currentItem = this._filteredItems[indexOfItem];
-        const nextItem = isForward ? this._filteredItems[indexOfItem + 1] : this._filteredItems[indexOfItem - 1];
+        const currentItem = allItems[indexOfItem];
         const isGroupItem = currentItem && currentItem.isGroupItem;
+        const nextItem = isForward ? allItems[indexOfItem + 1] : allItems[indexOfItem - 1];
         if ((!isOpen) && ((isGroupItem && !nextItem) || (!isGroupItem && !currentItem))) {
             return;
         }
@@ -375,7 +429,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         item && this._applyAtomicValueAndSelection(item, (this.open ? this._userTypedValue : ""), true);
         if ((item && !item.selected)) {
             this.fireEvent("selection-change", {
-                item,
+                item: item,
             });
         }
         this.fireEvent("input");
@@ -416,9 +470,10 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._handleItemNavigation(e, --indexOfItem, false /* isForward */);
     }
     _handlePageUp(e, indexOfItem) {
+        const allItems = this._getItems();
         const isProposedIndexValid = indexOfItem - SKIP_ITEMS_SIZE > -1;
         indexOfItem = isProposedIndexValid ? indexOfItem - SKIP_ITEMS_SIZE : 0;
-        const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
+        const shouldMoveForward = isInstanceOfComboBoxItemGroup(allItems[indexOfItem]) && !this.open;
         if (!isProposedIndexValid && this.hasValueStateText && this.open) {
             this._clearFocus();
             this._itemFocused = false;
@@ -429,14 +484,15 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._handleItemNavigation(e, indexOfItem, shouldMoveForward);
     }
     _handlePageDown(e, indexOfItem) {
-        const itemsLength = this._filteredItems.length;
+        const allItems = this._getItems();
+        const itemsLength = allItems.length;
         const isProposedIndexValid = indexOfItem + SKIP_ITEMS_SIZE < itemsLength;
         indexOfItem = isProposedIndexValid ? indexOfItem + SKIP_ITEMS_SIZE : itemsLength - 1;
-        const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
+        const shouldMoveForward = isInstanceOfComboBoxItemGroup(allItems[indexOfItem]) && !this.open;
         this._handleItemNavigation(e, indexOfItem, shouldMoveForward);
     }
     _handleHome(e) {
-        const shouldMoveForward = this._filteredItems[0].isGroupItem && !this.open;
+        const shouldMoveForward = isInstanceOfComboBoxItemGroup(this._filteredItems[0]) && !this.open;
         if (this.hasValueStateText && this.open) {
             this._clearFocus();
             this._itemFocused = false;
@@ -447,7 +503,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._handleItemNavigation(e, 0, shouldMoveForward);
     }
     _handleEnd(e) {
-        this._handleItemNavigation(e, this._filteredItems.length - 1, true /* isForward */);
+        this._handleItemNavigation(e, this._getItems().length - 1, true /* isForward */);
     }
     _keyup() {
         this._userTypedValue = this.value.substring(0, this.inner.selectionStart || 0);
@@ -455,14 +511,21 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     _keydown(e) {
         const isNavKey = isDown(e) || isUp(e) || isPageUp(e) || isPageDown(e) || isHome(e) || isEnd(e);
         const picker = this.responsivePopover;
+        const allItems = this._getItems();
         this._autocomplete = !(isBackSpace(e) || isDelete(e));
         this._isKeyNavigation = false;
         if (isNavKey && !this.readonly && this._filteredItems.length) {
             this.handleNavKeyPress(e);
         }
         if (isEnter(e)) {
-            const focusedItem = this._filteredItems.find(item => {
-                return item.focused;
+            let focusedItem;
+            this._filteredItems.forEach(item => {
+                if (isInstanceOfComboBoxItemGroup(item) && !focusedItem) {
+                    focusedItem = item.items.find(groupItem => groupItem.focused);
+                }
+                if (item.focused) {
+                    focusedItem = item;
+                }
             });
             this._fireChangeEvent();
             if (picker?.open && !focusedItem?.isGroupItem) {
@@ -470,8 +533,8 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
                 this.focused = true;
                 this.inner.setSelectionRange(this.value.length, this.value.length);
             }
-            else if (this.FormSupport) {
-                this.FormSupport.triggerFormSubmit(this);
+            else if (this._internals?.form) {
+                submitForm(this);
             }
         }
         if (isEscape(e)) {
@@ -486,7 +549,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             e.preventDefault();
             this._resetFilter();
             this._toggleRespPopover();
-            const selectedItem = this._filteredItems.find(item => {
+            const selectedItem = allItems.find(item => {
                 return item.selected;
             });
             if (selectedItem && this.open) {
@@ -523,38 +586,49 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         this._isValueStateFocused = false;
         this._clearFocus();
-        picker?.close();
+        if (picker) {
+            picker.preventFocusRestore = false;
+            picker.open = false;
+        }
     }
     async _openRespPopover() {
-        (await this._getPicker()).showAt(this, true);
+        const picker = await this._getPicker();
+        picker.opener = this;
+        picker.open = true;
     }
     _filterItems(str) {
-        const itemsToFilter = this.items.filter(item => !item.isGroupItem);
-        const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
-        // Return the filtered items and their group items
-        return this.items.filter((item, idx, allItems) => ComboBox_1._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
-    }
-    /**
-     * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
-     * @private
-     */
-    static _groupItemFilter(item, idx, allItems, filteredItems) {
-        if (item.isGroupItem) {
-            let groupHasFilteredItems;
-            while (allItems[idx] && !allItems[idx].isGroupItem && !groupHasFilteredItems) {
-                groupHasFilteredItems = filteredItems.indexOf(allItems[idx]) !== -1;
-                idx++;
+        let filteredItem;
+        let filteredGroupItems = [];
+        const filteredItems = [];
+        const filteredItemGroups = [];
+        this._resetItemVisibility();
+        this.items.forEach(item => {
+            if (isInstanceOfComboBoxItemGroup(item)) {
+                filteredGroupItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, item.items, "text");
+                filteredGroupItems.forEach(i => {
+                    i._isVisible = true;
+                });
+                if (filteredGroupItems.length) {
+                    filteredItemGroups.push(item);
+                }
+                return;
             }
-            return groupHasFilteredItems;
-        }
+            [filteredItem] = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, [item], "text");
+            if (filteredItem) {
+                filteredItem._isVisible = true;
+                filteredItems.push(filteredItem);
+            }
+        });
+        return [...filteredItemGroups, ...filteredItems];
     }
     _getFirstMatchingItem(current) {
-        const currentlyFocusedItem = this.items.find(item => item.focused === true);
+        const allItems = this._getItems();
+        const currentlyFocusedItem = allItems.find(item => item.focused === true);
         if (currentlyFocusedItem?.isGroupItem) {
             this.value = this.filterValue;
             return;
         }
-        const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem);
+        const matchingItems = (this._startsWithMatchingItems(current).filter(item => !isInstanceOfComboBoxItemGroup(item)));
         if (matchingItems.length) {
             return matchingItems[0];
         }
@@ -570,11 +644,20 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     _selectMatchingItem() {
         const currentlyFocusedItem = this.items.find(item => item.focused);
         const shouldSelectionBeCleared = currentlyFocusedItem && currentlyFocusedItem.isGroupItem;
-        const itemToBeSelected = this._filteredItems.find(item => {
-            return !item.isGroupItem && (item.text === this.value) && !shouldSelectionBeCleared;
+        let itemToBeSelected;
+        this._filteredItems.forEach(item => {
+            if (!shouldSelectionBeCleared && !itemToBeSelected) {
+                itemToBeSelected = ((!item.isGroupItem && (item.text === this.value)) ? item : item?.items?.find(i => i.text === this.value));
+            }
         });
         this._filteredItems = this._filteredItems.map(item => {
-            item.selected = item === itemToBeSelected;
+            if (!isInstanceOfComboBoxItemGroup(item)) {
+                item.selected = item === itemToBeSelected;
+                return item;
+            }
+            item.items?.forEach(groupItem => {
+                groupItem.selected = itemToBeSelected === groupItem;
+            });
             return item;
         });
     }
@@ -619,9 +702,10 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._itemFocused = true;
     }
     _announceSelectedItem(indexOfItem) {
-        const currentItem = this._filteredItems[indexOfItem];
-        const nonGroupItems = this._filteredItems.filter(item => !item.isGroupItem);
-        const currentItemAdditionalText = currentItem.additionalText || "";
+        const allItems = this._getItems();
+        const currentItem = allItems[indexOfItem];
+        const nonGroupItems = allItems.filter(item => !item.isGroupItem);
+        const currentItemAdditionalText = currentItem?.additionalText || "";
         const isGroupItem = currentItem?.isGroupItem;
         const itemPositionText = ComboBox_1.i18nBundle.getText(LIST_ITEM_POSITION, nonGroupItems.indexOf(currentItem) + 1, nonGroupItems.length);
         const groupHeaderText = ComboBox_1.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
@@ -647,10 +731,19 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this.focus();
         }
     }
+    _makeAllVisible(item) {
+        if (isInstanceOfComboBoxItemGroup(item)) {
+            item.items.forEach(groupItem => {
+                groupItem._isVisible = true;
+            });
+            return;
+        }
+        item._isVisible = true;
+    }
     async _scrollToItem(indexOfItem, forward) {
         const picker = await this._getPicker();
         const list = picker.querySelector(".ui5-combobox-items-list");
-        const listItem = list?.items[indexOfItem];
+        const listItem = list?.listItems[indexOfItem];
         if (listItem) {
             const pickerRect = picker.getBoundingClientRect();
             const listItemRect = listItem.getBoundingClientRect();
@@ -799,6 +892,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
 __decorate([
     property()
 ], ComboBox.prototype, "value", void 0);
+__decorate([
+    property()
+], ComboBox.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean })
 ], ComboBox.prototype, "noTypeahead", void 0);
@@ -866,6 +962,7 @@ ComboBox = ComboBox_1 = __decorate([
     customElement({
         tag: "ui5-combobox",
         languageAware: true,
+        formAssociated: true,
         renderer: litRender,
         styles: [
             ComboBoxCss,
@@ -883,9 +980,10 @@ ComboBox = ComboBox_1 = __decorate([
             BusyIndicator,
             Button,
             StandardListItem,
+            ListItemGroup,
             ListItemGroupHeader,
             Popover,
-            ComboBoxGroupItem,
+            ComboBoxItemGroup,
             Input,
             SuggestionItem,
         ],