@ui5/webcomponents 2.0.0-rc.5 → 2.0.0

package/dist/MultiComboBox.js

@@ -14,7 +14,6 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isShow, isDown, isUp, isSpace, isSpaceCtrl, isSpaceShift, isRight, isHome, isEnd, isTabNext, isTabPrevious, isUpShift, isDownShift, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isHomeCtrl, isEndCtrl, isCtrlA, isInsertShift, isBackSpace, isDelete, isEscape, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isPhone, isAndroid, isFirefox, } from "@ui5/webcomponents-base/dist/Device.js";
@@ -30,15 +29,15 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
-import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
-import ListItemGroupHeader from "./ListItemGroupHeader.js";
+import MultiComboBoxItemGroup, { isInstanceOfMultiComboBoxItemGroup } from "./MultiComboBoxItemGroup.js";
+import ListItemGroup from "./ListItemGroup.js";
 import Tokenizer, { getTokensCountText } from "./Tokenizer.js";
 import Token from "./Token.js";
 import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.js";
 import ToggleButton from "./ToggleButton.js";
 import * as Filters from "./Filters.js";
 import Button from "./Button.js";
@@ -51,10 +50,8 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 import MultiComboBoxPopover from "./generated/themes/MultiComboBoxPopover.css.js";
-import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import CheckBox from "./CheckBox.js";
 import Input from "./Input.js";
-import "./types/PopoverHorizontalAlign.js";
 import SuggestionItem from "./SuggestionItem.js";
 /**
  * @class
@@ -111,7 +108,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     get formFormattedValue() {
         const selectedItems = (this.items || []).filter(item => item.selected);
-        if (selectedItems.length) {
+        if (selectedItems.length && this.name) {
             const formData = new FormData();
             formData.append(this.name, this.value);
             for (let i = 0; i < selectedItems.length; i++) {
@@ -123,6 +120,110 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     constructor() {
         super();
+        /**
+         * Defines the value of the component.
+         *
+         * **Note:** The property is updated upon typing.
+         * @default ""
+         * @formEvents change input
+         * @formProperty
+         * @public
+         */
+        this.value = "";
+        /**
+         * Defines whether the value will be autcompleted to match an item
+         * @default false
+         * @public
+         * @since 1.4.0
+         */
+        this.noTypeahead = false;
+        /**
+         * Defines if the user input will be prevented, if no matching item has been found
+         * @default false
+         * @public
+         */
+        this.noValidation = false;
+        /**
+         * Defines whether the component is in disabled state.
+         *
+         * **Note:** A disabled component is completely noninteractive.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Defines the value state of the component.
+         * @default "None"
+         * @public
+         */
+        this.valueState = "None";
+        /**
+         * Defines whether the component is read-only.
+         *
+         * **Note:** A read-only component is not editable,
+         * but still provides visual feedback upon user interaction.
+         * @default false
+         * @public
+         */
+        this.readonly = false;
+        /**
+         * Defines whether the component is required.
+         * @default false
+         * @public
+         * @since 1.0.0-rc.5
+         */
+        this.required = false;
+        /**
+         * Defines the filter type of the component.
+         * @default "StartsWithPerTerm"
+         * @public
+         */
+        this.filter = "StartsWithPerTerm";
+        /**
+         * Defines whether the clear icon of the multi-combobox will be shown.
+         * @default false
+         * @public
+         * @since 1.20.1
+         */
+        this.showClearIcon = false;
+        /**
+         * Determines if the select all checkbox is visible on top of suggestions.
+         * @default false
+         * @public
+         */
+        this.showSelectAll = false;
+        this._effectiveValueState = "None";
+        /**
+         * Indicates whether the value state message popover is open.
+         * @private
+         */
+        this.valueStateOpen = false;
+        /**
+         * Indicates whether the Tokenizer n-more popover is open.
+         * @private
+         */
+        this.tokenizerOpen = false;
+        /**
+         * Indicates whether the items picker is open.
+         * @private
+         */
+        this._open = false;
+        this._valueBeforeOpen = this.value;
+        this.filterSelected = false;
+        this.focused = false;
+        this._tokenizerFocused = false;
+        this._iconPressed = false;
+        this._inputWidth = 0;
+        this._listWidth = 0;
+        this._performingSelectionTwice = false;
+        this._allSelected = false;
+        this._effectiveShowClearIcon = false;
+        this._dialogInputValueState = "None";
+        /**
+         * Indicates whether the tokenizer has tokens
+         * @private
+         */
+        this.tokenizerAvailable = false;
         this._filteredItems = [];
         this.selectedItems = [];
         this._previouslySelectedItems = [];
@@ -146,7 +247,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._inputWidth = this.offsetWidth;
     }
     _handleMobileInput(e) {
-        if (!this._getRespPopover().open) {
+        if (!this.open) {
             return;
         }
         const target = e.target;
@@ -168,10 +269,12 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.fireEvent("change");
         }
     }
-    _mobileInputChange(e) {
-        this._inputChange.call(this);
+    _onMobileInputKeydown(e) {
+        if (!isEnter(e)) {
+            return;
+        }
         const { value } = e.target;
-        const matchingItem = this.items.find(item => item.text === value);
+        const matchingItem = this._getItems().find(item => item.text === value);
         if (!matchingItem) {
             return;
         }
@@ -180,28 +283,28 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (!changePrevented) {
             matchingItem.selected = !initiallySelected;
             this._getResponsivePopover().preventFocusRestore = false;
-            this._getResponsivePopover().open = false;
+            this._open = false;
             this.value = "";
         }
     }
-    _togglePopover() {
-        this._tokenizer.open = false;
-        this._getRespPopover().toggle(this);
+    _toggleTokenizerPopover() {
+        this.tokenizerOpen = false;
+        this._open = !this.open;
     }
     togglePopoverByDropdownIcon() {
         this._shouldFilterItems = false;
-        this._getRespPopover().toggle(this);
-        this._tokenizer.open = false;
+        this._open = !this.open;
+        this.tokenizerOpen = false;
     }
     _showFilteredItems() {
         this.filterSelected = true;
         this._showMorePressed = true;
-        this._togglePopover();
+        this._toggleTokenizerPopover();
     }
     filterSelectedItems(e) {
         this.filterSelected = e.target.pressed;
         const selectedItems = this._filteredItems.filter(item => item.selected);
-        this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
+        this.selectedItems = this._getItems().filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
     }
     /**
      * Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.
@@ -251,11 +354,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._filteredItems = filteredItems;
         if (!isPhone()) {
             if (filteredItems.length === 0) {
-                this._getRespPopover().open = false;
+                this._open = false;
             }
             else {
-                this._getRespPopover().opener = this;
-                this._getRespPopover().open = true;
+                this._open = true;
             }
         }
         this.fireEvent("input");
@@ -279,7 +381,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (this._getSelectedItems().length) {
             return "";
         }
-        return this.placeholder;
+        return this.placeholder || "";
     }
     _handleArrowLeft() {
         const inputDomRef = this._inputDom;
@@ -289,6 +391,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._tokenizer._focusLastToken();
         }
     }
+    _onPopoverFocusOut() {
+        if (!isPhone()) {
+            this._tokenizer.expanded = this._open;
+        }
+    }
     _tokenizerFocusOut(e) {
         this._tokenizerFocused = false;
         const tokensCount = this._tokenizer.tokens.length;
@@ -332,7 +439,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         // CTRL + Arrow Down navigation is performed by the ItemNavigation module of the List,
         // here we only implement the text selection of the selected item
-        if (isArrowDownCtrl && !this._getRespPopover().open) {
+        if (isArrowDownCtrl && !this.open) {
             setTimeout(() => this._inputDom.setSelectionRange(0, this._inputDom.value.length), 0);
         }
         if (isLeftCtrl(e) || isRightCtrl(e)) {
@@ -345,7 +452,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         if (isCtrl && e.key.toLowerCase() === "i" && this._tokenizer.tokens.length > 0) {
             e.preventDefault();
-            this._togglePopover();
+            this._toggleTokenizerPopover();
         }
         if (isSpaceShift(e)) {
             e.preventDefault();
@@ -388,7 +495,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _handleTokenCreationUponPaste(pastedText, e) {
         const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
-        const matchingItems = this.items.filter(item => separatedText.includes(item.text) && !item.selected);
+        const matchingItems = this._getItems().filter(item => !item.isGroupItem && !item.selected && separatedText.includes(item.text));
         if (matchingItems.length > 1) {
             e.preventDefault();
             this._selectItems(matchingItems);
@@ -405,19 +512,19 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._handleTokenCreationUponPaste(pastedText, e);
     }
     _handleShow(e) {
-        const items = this.items;
+        const items = this._getItems();
         const selectedItem = this._getSelectedItems()[0];
         const focusedToken = this._tokenizer.tokens.find(token => token.focused);
         const value = this.value;
-        const matchingItem = this.items.find(item => item.text.localeCompare(value, undefined, { sensitivity: "base" }) === 0);
+        const matchingItem = this._getItems().find(item => item.text?.localeCompare(value, undefined, { sensitivity: "base" }) === 0);
         e.preventDefault();
         if (this.readonly) {
             return;
         }
         this._isOpenedByKeyboard = true;
         this._shouldFilterItems = false;
-        this._filteredItems = this.items;
-        this._togglePopover();
+        this._filteredItems = this._getItems();
+        this._toggleTokenizerPopover();
         if (!focusedToken && matchingItem) {
             this._itemToFocus = matchingItem;
             return;
@@ -429,7 +536,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._itemToFocus = items.find(item => item.text === focusedToken.text);
         }
         else {
-            this._itemToFocus = items[0];
+            this._itemToFocus = items.find(item => isInstanceOfMultiComboBoxItem(item));
         }
     }
     _handlePageUp(e) {
@@ -450,7 +557,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (isAutoCompleted) {
             this.value = this.valueBeforeAutoComplete;
         }
-        if (!this.noValidation || (!this.open && this.noValidation)) {
+        if (!this.noValidation || (!this._open && this.noValidation)) {
             this.value = this._lastValue;
         }
     }
@@ -471,10 +578,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _handleTab() {
-        this._getRespPopover().open = false;
+        this._open = false;
     }
     _handleSelectAll() {
-        const filteredItems = this._filteredItems;
+        const filteredItems = this._filteredItems.filter(item => !item.isGroupItem);
         const allItemsSelected = filteredItems.every(item => item.selected);
         this._previouslySelectedItems = filteredItems.filter(item => item.selected).map(item => item);
         filteredItems.forEach(item => {
@@ -517,7 +624,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         else {
             this._previouslySelectedItems = this._getSelectedItems();
-            this.selectedItems?.forEach(item => {
+            this.selectedItems?.filter(item => !item.isGroupItem).forEach(item => {
                 item.selected = e.target.checked;
             });
             if (!e.target.checked) {
@@ -530,7 +637,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _onItemKeydown(e) {
-        const isFirstItem = this.list?.items[0] === e.target;
+        const isFirstItemGroup = this.list?.items[1] === e.target && this.list?.items[0].hasAttribute("ui5-li-group");
+        const isFirstItem = this.list?.items[0] === e.target || isFirstItemGroup;
         const isArrowUp = isUp(e) || isUpCtrl(e);
         if (this.hasValueStateMessage && !this.valueStateHeader) {
             this._setValueStateHeader();
@@ -561,7 +669,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.list?.items[this.list?._itemNavigation._currentIndex].focus();
         }
         if (isShow(e)) {
-            this._togglePopover();
+            this._toggleTokenizerPopover();
         }
         if (isCtrlA(e)) {
             this._handleSelectAll();
@@ -569,6 +677,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         if (isFirstItem && isArrowUp) {
             if (this.showSelectAll) {
+                if (isFirstItemGroup) {
+                    this.list?.items[0].focus();
+                    return;
+                }
                 this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
             }
             else if (this.valueStateHeader) {
@@ -591,18 +703,19 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _onItemTab() {
+        this._getResponsivePopover().preventFocusRestore = true;
         this._inputDom.focus();
-        this._getRespPopover().open = false;
+        this._open = false;
+        this._tokenizer.expanded = false;
     }
     _handleArrowNavigation(e, isDownControl) {
         const isArrowDown = isDownControl || isDown(e);
-        const hasSuggestions = this.items.length;
-        const isOpen = this._getRespPopover().open;
+        const hasSuggestions = this._getItems().length;
         e.preventDefault();
         if (this.hasValueStateMessage && !this.valueStateHeader) {
             this._setValueStateHeader();
         }
-        if (isArrowDown && isOpen) {
+        if (isArrowDown && this.open) {
             if (this.valueStateHeader) {
                 this.value = this.valueBeforeAutoComplete || this.value;
                 this.valueStateHeader.focus();
@@ -616,14 +729,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (isArrowDown && hasSuggestions) {
             this._handleArrowDown();
         }
-        if (!isArrowDown && !isOpen && !this.readonly) {
+        if (!isArrowDown && !this._open && !this.readonly) {
             this._navigateToPrevItem();
         }
     }
     async _handleArrowDown() {
-        const isOpen = this._getRespPopover().open;
         const firstListItem = this.list?.listItems[0];
-        if (isOpen) {
+        if (this.open) {
             firstListItem && this.list?._itemNavigation.setCurrentItem(firstListItem);
             this.value = this.valueBeforeAutoComplete || this.value;
             // wait item navigation to apply correct tabindex
@@ -635,7 +747,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _handleItemRangeSelection(e) {
-        const items = this.items;
+        const items = this._getItems();
         const listItems = this.list?.items;
         const currentItemIdx = Number(listItems?.indexOf(e.target));
         const nextItemIdx = currentItemIdx + 1;
@@ -655,7 +767,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _navigateToNextItem() {
-        const items = this.items;
+        const items = this._getItems();
         const itemsCount = items.length;
         const previousItemIdx = this.currentItemIdx;
         if (previousItemIdx > -1 && items[previousItemIdx].text !== this.value) {
@@ -664,9 +776,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (previousItemIdx >= itemsCount - 1) {
             return;
         }
-        let currentItem = this.items[++this.currentItemIdx];
+        let currentItem = this._getItems()[++this.currentItemIdx];
         while ((this.currentItemIdx < itemsCount - 1 && currentItem.selected) || currentItem.isGroupItem) {
-            currentItem = this.items[++this.currentItemIdx];
+            currentItem = this._getItems()[++this.currentItemIdx];
         }
         if (currentItem.selected === true || currentItem.isGroupItem) {
             this.currentItemIdx = previousItemIdx;
@@ -677,7 +789,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._innerInput.setSelectionRange(0, currentItem.text.length);
     }
     _navigateToPrevItem() {
-        const items = this.items;
+        const items = this._getItems();
         let previousItemIdx = this.currentItemIdx;
         if ((!this.value && previousItemIdx !== -1) || (previousItemIdx !== -1 && this.value && this.value !== items[previousItemIdx].text)) {
             previousItemIdx = -1;
@@ -689,9 +801,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.currentItemIdx = 0;
             return;
         }
-        let currentItem = this.items[--this.currentItemIdx];
+        let currentItem = this._getItems()[--this.currentItemIdx];
         while ((currentItem && this.currentItemIdx > 0) && (currentItem.selected || currentItem.isGroupItem)) {
-            currentItem = this.items[--this.currentItemIdx];
+            currentItem = this._getItems()[--this.currentItemIdx];
         }
         if (!currentItem) {
             return;
@@ -706,7 +818,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _handleEnter() {
         const lowerCaseValue = this.value.toLowerCase();
-        const matchingItem = this.items.find(item => (item.text.toLowerCase() === lowerCaseValue && !item.isGroupItem));
+        const matchingItem = this._getItems().find(item => (!item.isGroupItem && item.text.toLowerCase() === lowerCaseValue));
         const oldValueState = this.valueState;
         const innerInput = this._innerInput;
         if (this._internals?.form) {
@@ -733,7 +845,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 }
             }
             innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
-            this._getRespPopover().open = false;
+            this._open = false;
         }
     }
     _resetValueState(valueState, callback) {
@@ -769,10 +881,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _filterItems(str) {
-        const itemsToFilter = this.items.filter(item => !item.isGroupItem);
+        const itemsToFilter = this._getItems().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) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
+        return this._getItems().filter((item, idx, allItems) => MultiComboBox_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)
@@ -788,8 +900,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             return groupHasFilteredItems;
         }
     }
-    _afterOpenPicker() {
-        this._toggle();
+    _afterOpen() {
+        const action = this._open ? "open" : "close";
         if (!isPhone() && !this._isOpenedByKeyboard) {
             this._innerInput.focus();
         }
@@ -797,18 +909,34 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._itemToFocus?.focus();
         }
         else {
-            this._getRespPopover().focus();
+            this._getResponsivePopover().focus();
         }
+        this.fireEvent(action);
         this._previouslySelectedItems = this._getSelectedItems();
         this._isOpenedByKeyboard = false;
     }
-    _toggle() {
-        this._open = !this._open;
-        this.fireEvent("open-change");
+    /**
+     * Retrieves a flat structure of all MultiComboBox items from the slotted nodes.
+     *
+     * @private
+     */
+    _getItems() {
+        const items = [];
+        const slottedItems = this.getSlottedNodes("items");
+        slottedItems.forEach(item => {
+            if (isInstanceOfMultiComboBoxItemGroup(item)) {
+                const groupItems = [item, ...item.items].filter(Boolean);
+                items.push(...groupItems);
+            }
+            else {
+                items.push(item);
+            }
+        });
+        return items;
     }
     _getSelectedItems() {
         // Angular 2 way data binding
-        this.selectedValues = this.items.filter(item => item.selected);
+        this.selectedValues = this._getItems().filter(item => item.selected);
         return this.selectedValues;
     }
     _listSelectionChange(e) {
@@ -832,7 +960,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.filterSelected = false;
         }
         if (!e.detail.selectionComponentPressed && !isSpace(castedEvent) && !isSpaceCtrl(castedEvent)) {
-            this._getRespPopover().open = false;
+            this._open = false;
             this.value = "";
             // if the item (not checkbox) is clicked, call the selection change
             if (isPhone()) {
@@ -843,12 +971,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 }
             }
             this.fireEvent("input");
+            return;
         }
         this.value = this.valueBeforeAutoComplete || "";
     }
     syncItems(listItems) {
         listItems.forEach(item => {
-            this.items.forEach(mcbItem => {
+            this._getItems().forEach(mcbItem => {
                 if (mcbItem._id === item.getAttribute("data-ui5-token-id")) {
                     mcbItem.selected = item.selected;
                 }
@@ -863,18 +992,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.fireEvent("value-changed");
         return changePrevented;
     }
-    _getRespPopover() {
-        return this.shadowRoot.querySelector(`.ui5-multi-combobox-all-items-responsive-popover`);
-    }
-    async _getList() {
-        await renderFinished();
+    _getList() {
         this.list = this.shadowRoot.querySelector(".ui5-multi-combobox-all-items-list");
         return this.list;
     }
     _click() {
         if (isPhone() && !this.readonly && !this._showMorePressed && !this._deleting) {
-            this._getRespPopover().opener = this;
-            this._getRespPopover().open = true;
+            this._open = true;
         }
         this._showMorePressed = false;
     }
@@ -887,18 +1011,24 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             popover.open = false;
         }
     }
-    _afterClosePicker() {
+    _beforeClose() {
+        this._open = false;
+    }
+    _afterClose() {
+        const action = this._open ? "open" : "close";
         // close device's keyboard and prevent further typing
         if (isPhone()) {
             this._dialogInputValueState = this.valueState;
+            this._tokenizer.expanded = false;
         }
-        this._toggle();
+        this.fireEvent(action);
         this._iconPressed = false;
         this._preventTokenizerToggle = false;
         this.filterSelected = false;
     }
     _beforeOpen() {
-        this._itemsBeforeOpen = this.items.map(item => {
+        this._open = true;
+        this._itemsBeforeOpen = this._getItems().map(item => {
             return {
                 ref: item,
                 selected: item.selected,
@@ -910,7 +1040,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._innerInput.value = this.value;
         if (this.filterSelected) {
             const selectedItems = this._filteredItems.filter(item => item.selected);
-            this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
+            this.selectedItems = this._getItems().filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
         }
     }
     _handleTypeAhead(item, filterValue) {
@@ -926,16 +1056,16 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._shouldAutocomplete = false;
     }
     _getFirstMatchingItem(current) {
-        if (!this.items.length) {
+        if (!this._getItems().length) {
             return;
         }
-        const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem && !item.selected);
+        const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.selected);
         if (matchingItems.length) {
             return matchingItems[0];
         }
     }
     _startsWithMatchingItems(str) {
-        return Filters.StartsWith(str, this.items, "text");
+        return Filters.StartsWith(str, this._getItems().filter(item => !item.isGroupItem), "text");
     }
     _revertSelection() {
         this._filteredItems.forEach(item => {
@@ -947,21 +1077,19 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const autoCompletedChars = input && (input.selectionEnd || 0) - (input.selectionStart || 0);
         const value = input && input.value;
         if (this.open) {
-            this._getList().then(list => {
-                const selectedItemsCount = list?.querySelectorAll("[ui5-li][selected]")?.length;
-                const allItemsCount = list?.querySelectorAll("[ui5-li]")?.length;
-                this._allSelected = selectedItemsCount === allItemsCount;
-            });
+            const list = this._getList();
+            const selectedListItemsCount = list?.querySelectorAll("[ui5-li][selected]")?.length;
+            const items = this._getItems().filter(item => !item.isGroupItem);
+            const listItems = list?.querySelectorAll("[ui5-li]")?.length;
+            const selectedItemsCount = items.filter(item => item.selected).length;
+            this._allSelected = selectedItemsCount === items.length || selectedListItemsCount === listItems;
         }
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
         this._inputLastValue = value;
         if (input && !input.value) {
             this.valueBeforeAutoComplete = "";
-            this._filteredItems = this.items;
+            this._filteredItems = this._getItems();
         }
-        this.items.forEach(item => {
-            item._getRealDomRef = () => this._getRespPopover().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
-        });
         this.tokenizerAvailable = this._getSelectedItems().length > 0;
         this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
         if (!input || !value) {
@@ -979,24 +1107,26 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._filteredItems = this._filterItems(this._shouldAutocomplete || !!autoCompletedChars ? this.valueBeforeAutoComplete : value);
         }
         else {
-            this._filteredItems = this.items;
+            this._filteredItems = this._getItems();
         }
     }
-    async onAfterRendering() {
-        this._getRespPopover();
-        await this._getList();
-        this.toggle(this.shouldDisplayOnlyValueStateMessage);
+    onAfterRendering() {
+        this._getList();
+        this.valueStateOpen = this.shouldDisplayOnlyValueStateMessage;
         this.storeResponsivePopoverWidth();
         this._deleting = false;
         // force resize of the tokenizer on invalidation
         this._tokenizer._handleResize();
         this._tokenizer.preventInitialFocus = true;
-        if (this._getRespPopover()?.open) {
+        if (this.open && !isPhone()) {
             this._tokenizer.expanded = true;
         }
         if (this._tokenizer.expanded && this.hasAttribute("focused")) {
             this._tokenizer.scrollToEnd();
         }
+        this._getItems().forEach(item => {
+            item._getRealDomRef = () => this._getResponsivePopover().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+        });
     }
     get _isPhone() {
         return isPhone();
@@ -1016,25 +1146,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._clearingValue = true;
     }
     storeResponsivePopoverWidth() {
-        if (this.open && !this._listWidth) {
+        if (this._open && !this._listWidth) {
             this._listWidth = this.list.offsetWidth;
         }
     }
-    toggle(isToggled) {
-        if (isToggled && !this.open) {
-            this.openPopover();
-        }
-        else {
-            this.closePopover();
-        }
-    }
     handleCancel() {
         this._itemsBeforeOpen.forEach(item => {
             if (isInstanceOfMultiComboBoxItem(item.ref)) {
                 item.ref.selected = item.selected;
             }
         });
-        this._togglePopover();
+        this._toggleTokenizerPopover();
         this.value = this._valueBeforeOpen;
     }
     handleOK() {
@@ -1047,14 +1169,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (!this.noValidation) {
             this.value = "";
         }
-        this._togglePopover();
-    }
-    openPopover() {
-        const popover = this._getPopover();
-        if (popover) {
-            popover.opener = this;
-            popover.open = true;
-        }
+        this._toggleTokenizerPopover();
     }
     _forwardFocusToInner() {
         this._innerInput.focus();
@@ -1066,11 +1181,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         return this;
     }
-    closePopover() {
-        if (this._getPopover()) {
-            this._getPopover().open = false;
-        }
-    }
     _getPopover() {
         return this.shadowRoot.querySelector("[ui5-popover]");
     }
@@ -1106,6 +1216,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const responsivePopover = this._getResponsivePopover();
         const popover = this._getPopover();
         const focusIsGoingInPopover = [responsivePopover, popover].some(popup => popup?.contains(e.relatedTarget));
+        const focusIsGoingInValueStatePopup = popover?.contains(e.relatedTarget);
+        if (focusIsGoingInValueStatePopup) {
+            e.stopImmediatePropagation();
+            return;
+        }
         if ((!this.shadowRoot.contains(e.relatedTarget) || focusIsGoingInPopover) && !this._deleting && !this._clearingValue) {
             this.focused = false;
             if (this._lastValue !== this.value) {
@@ -1223,8 +1338,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     get _innerInput() {
         if (isPhone()) {
-            if (this._getRespPopover()?.open) {
-                return this._getRespPopover().querySelector("[ui5-input]").shadowRoot.querySelector("input");
+            if (this._getResponsivePopover()?.open) {
+                return this._getResponsivePopover().querySelector("[ui5-input]").shadowRoot.querySelector("input");
             }
         }
         return this._inputDom;
@@ -1249,7 +1364,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             return this._tokenizer.expanded;
         }
         const isCurrentlyExpanded = this._tokenizer?.expanded;
-        const shouldBeExpanded = this.focused || this.open || isCurrentlyExpanded;
+        const shouldBeExpanded = this.focused || this._open || isCurrentlyExpanded;
         return shouldBeExpanded;
     }
     get _valueStatePopoverHorizontalAlign() {
@@ -1265,7 +1380,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return MultiComboBox_1.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
     }
     get selectAllCheckboxLabel() {
-        const items = this.items.filter(item => !item.isGroupItem);
+        const items = this._getItems().filter(item => !item.isGroupItem);
         const selected = items.filter(item => item.selected);
         return MultiComboBox_1.i18nBundle.getText(MCB_SELECTED_ITEMS, selected.length, items.length);
     }
@@ -1326,7 +1441,7 @@ __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "disabled", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.None })
+    property()
 ], MultiComboBox.prototype, "valueState", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1335,7 +1450,7 @@ __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "required", void 0);
 __decorate([
-    property({ type: ComboBoxFilter, defaultValue: ComboBoxFilter.StartsWithPerTerm })
+    property()
 ], MultiComboBox.prototype, "filter", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1350,19 +1465,25 @@ __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "showSelectAll", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.None })
+    property()
 ], MultiComboBox.prototype, "_effectiveValueState", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "valueStateOpen", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "tokenizerOpen", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
 ], MultiComboBox.prototype, "_open", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "_valueBeforeOpen", void 0);
 __decorate([
-    property({ type: Object, noAttribute: true, multiple: true })
+    property({ type: Array })
 ], MultiComboBox.prototype, "_filteredItems", void 0);
 __decorate([
-    property({ type: Object, noAttribute: true, multiple: true })
+    property({ type: Array })
 ], MultiComboBox.prototype, "_previouslySelectedItems", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1377,10 +1498,10 @@ __decorate([
     property({ type: Boolean, noAttribute: true })
 ], MultiComboBox.prototype, "_iconPressed", void 0);
 __decorate([
-    property({ validator: Integer, noAttribute: true })
+    property({ type: Number, noAttribute: true })
 ], MultiComboBox.prototype, "_inputWidth", void 0);
 __decorate([
-    property({ validator: Integer, noAttribute: true, defaultValue: 0 })
+    property({ type: Number, noAttribute: true })
 ], MultiComboBox.prototype, "_listWidth", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
@@ -1392,7 +1513,7 @@ __decorate([
     property({ type: Boolean, noAttribute: true })
 ], MultiComboBox.prototype, "_effectiveShowClearIcon", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.None })
+    property()
 ], MultiComboBox.prototype, "_dialogInputValueState", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1422,7 +1543,7 @@ MultiComboBox = MultiComboBox_1 = __decorate([
         ],
         dependencies: [
             MultiComboBoxItem,
-            MultiComboBoxGroupItem,
+            MultiComboBoxItemGroup,
             Tokenizer,
             Token,
             Icon,
@@ -1430,8 +1551,8 @@ MultiComboBox = MultiComboBox_1 = __decorate([
             ResponsivePopover,
             Popover,
             List,
-            StandardListItem,
-            ListItemGroupHeader,
+            ListItemStandard,
+            ListItemGroup,
             ToggleButton,
             Button,
             CheckBox,
@@ -1451,12 +1572,19 @@ MultiComboBox = MultiComboBox_1 = __decorate([
     ,
     event("input")
     /**
-     * Fired when the dropdown is opened or closed.
-     * @since 1.0.0-rc.5
+     * Fired when the dropdown is opened.
+     * @since 2.0.0
+     * @public
+     */
+    ,
+    event("open")
+    /**
+     * Fired when the dropdown is closed.
+     * @since 2.0.0
      * @public
      */
     ,
-    event("open-change")
+    event("close")
     /**
      * Fired when selection is changed by user interaction.
      * @param {IMultiComboBoxItem[]} items an array of the selected items.