@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/dist/MultiComboBox.js

@@ -5,21 +5,30 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import {
 	isShow,
 	isDown,
-	isBackSpace,
+	isUp,
 	isSpace,
-	isLeft,
 	isRight,
+	isHome,
+	isTabNext,
+	isTabPrevious,
+	isCtrlA,
 } 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 { isIE, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/multiselect-all.js";
+import "@ui5/webcomponents-icons/dist/not-editable.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import Tokenizer 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";
@@ -31,9 +40,11 @@ import {
 	VALUE_STATE_SUCCESS,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_INFORMATION,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
+	VALUE_STATE_ERROR_ALREADY_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -44,6 +55,7 @@ import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPop
 import styles from "./generated/themes/MultiComboBox.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 /**
  * @public
@@ -54,14 +66,7 @@ const metadata = {
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
 		/**
-		 * Defines the <code>ui5-multi-combobox</code> items.
-		 * <br><br>
-		 * Example: <br>
-		 * &lt;ui5-multi-combobox><br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br>
-		 * &lt;/ui5-multi-combobox>
-		 * <br> <br>
+		 * Defines the component items.
 		 *
 		 * @type {sap.ui.webcomponents.main.IMultiComboBoxItem[]}
 		 * @slot items
@@ -74,7 +79,7 @@ const metadata = {
 		},
 
 		/**
-		* Defines the icon to be displayed in the <code>ui5-multi-combobox</code>.
+		* Defines the icon to be displayed in the component.
 		*
 		* @type {sap.ui.webcomponents.main.IIcon}
 		* @slot
@@ -86,13 +91,13 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state message that will be displayed as pop up under the <code>ui5-multi-combobox</code>.
+		 * Defines the value state message that will be displayed as pop up under the component.
 		 * <br><br>
 		 *
 		 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
 		 * <br>
 		 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-		 * when the <code>ui5-multi-combobox</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+		 * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
 		 * @type {HTMLElement[]}
 		 * @since 1.0.0-rc.9
 		 * @slot
@@ -104,7 +109,7 @@ const metadata = {
 	},
 	properties: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
 		/**
-		 * Defines the value of the <code>ui5-multi-combobox</code>.
+		 * Defines the value of the component.
 		 * <br><br>
 		 * <b>Note:</b> The property is updated upon typing.
 		 *
@@ -119,7 +124,7 @@ const metadata = {
 
 		/**
 		 * Defines a short hint intended to aid the user with data entry when the
-		 * <code>ui5-multi-combobox</code> has no value.
+		 * component has no value.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -141,9 +146,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether <code>ui5-multi-combobox</code> is in disabled state.
+		 * Defines whether the component is in disabled state.
 		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-multi-combobox</code> is completely noninteractive.
+		 * <b>Note:</b> A disabled component is completely noninteractive.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -154,7 +159,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state of the <code>ui5-multi-combobox</code>.
+		 * Defines the value state of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -175,9 +180,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-multi-combobox</code> is read-only.
+		 * Defines whether the component is read-only.
 		 * <br><br>
-		 * <b>Note:</b> A read-only <code>ui5-multi-combobox</code> is not editable,
+		 * <b>Note:</b> A read-only component is not editable,
 		 * but still provides visual feedback upon user interaction.
 		 *
 		 * @type {boolean}
@@ -189,7 +194,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-multi-combobox</code> is required.
+		 * Defines whether the component is required.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -201,7 +206,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the filter type of the <code>ui5-multi-combobox</code>.
+		 * Defines the filter type of the component.
 		 * Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>.
 		 *
 		 * @type {string}
@@ -257,6 +262,10 @@ const metadata = {
 			defaultValue: 0,
 			noAttribute: true,
 		},
+
+		_performingSelectionTwice: {
+			type: Boolean,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
 		/**
@@ -268,7 +277,7 @@ const metadata = {
 		change: {},
 
 		/**
-		 * Fired when the value of the <code>ui5-multi-combobox</code> changes at each keystroke.
+		 * Fired when the value of the component changes at each keystroke.
 		 *
 		 * @event
 		 * @public
@@ -305,10 +314,10 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-multi-combobox</code> component provides a list box with items and a text field allowing the user to either type a value directly into the control, or choose from the list of existing items.
+ * The <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.
  *
- * It is a drop-down list for selecting and filtering values, commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow of available options.
- * The select options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.
+ * The drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.
+ * The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.
  * <h3>Structure</h3>
  * The <code>ui5-multi-combobox</code> consists of the following elements:
  * <ul>
@@ -335,12 +344,6 @@ const metadata = {
  * <li> Backspace -  deletes the token and focus the next token. </li>
  * </ul>
  *
- * In the context of <code>ui5-multi-combobox</code>, you can provide a custom stable DOM ref for:
- * <ul>
- * <li>Every <code>ui5-mcb-item</code> that you provide.
- * Example: <code><ui5-mcb-item stable-dom-ref="item1"></ui5-mcb-item></code></li>
- * </ul>
- *
  * <h3>CSS Shadow Parts</h3>
  *
  * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
@@ -386,7 +389,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get dependencies() {
@@ -396,6 +399,7 @@ class MultiComboBox extends UI5Element {
 			Token,
 			Icon,
 			ResponsivePopover,
+			Popover,
 			List,
 			StandardListItem,
 			ToggleButton,
@@ -409,10 +413,11 @@ class MultiComboBox extends UI5Element {
 		this._filteredItems = [];
 		this.selectedValues = [];
 		this._inputLastValue = "";
+		this._valueBeforeOpen = "";
 		this._deleting = false;
 		this._validationTimeout = null;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._handleResizeBound = this._handleResize.bind(this);
+		this.currentItemIdx = -1;
 	}
 
 	onEnterDOM() {
@@ -431,34 +436,24 @@ class MultiComboBox extends UI5Element {
 		this.fireEvent("change");
 	}
 
-	_showMorePopover() {
-		this.filterSelected = true;
-		this._toggleRespPopover();
+	togglePopover() {
+		this.allItemsPopover.toggle(this);
 	}
 
-	togglePopover() {
-		if (!isPhone()) {
-			this._inputDom.focus();
-		}
+	_showFilteredItems() {
+		this.filterSelected = true;
+		this._showMorePressed = true;
 
-		this._toggleRespPopover();
+		this.togglePopover();
 	}
 
 	filterSelectedItems(event) {
-		if (this.allItemsSelected) {
-			this.filterSelected = true;
-			return;
-		}
-
 		this.filterSelected = event.target.pressed;
+		this.selectedItems = this._filteredItems.filter(item => item.selected);
 	}
 
 	get _showAllItemsButtonPressed() {
-		return this.filterSelected || this.allItemsSelected;
-	}
-
-	get allItemsSelected() {
-		return this.items.length === this.selectedValues.length;
+		return this.filterSelected;
 	}
 
 	get _inputDom() {
@@ -471,6 +466,10 @@ class MultiComboBox extends UI5Element {
 		const filteredItems = this._filterItems(value);
 		const oldValueState = this.valueState;
 
+		if (this.filterSelected) {
+			this.filterSelected = false;
+		}
+
 		/* skip calling change event when an input with a placeholder is focused on IE
 			- value of the host and the internal input should be differnt in case of actual input
 			- input is called when a key is pressed => keyup should not be called yet
@@ -492,10 +491,7 @@ class MultiComboBox extends UI5Element {
 			input.value = this._inputLastValue;
 			this.valueState = "Error";
 
-			this._validationTimeout = setTimeout(() => {
-				this.valueState = oldValueState;
-				this._validationTimeout = null;
-			}, 2000);
+			this._resetValueState(oldValueState);
 
 			return;
 		}
@@ -508,7 +504,7 @@ class MultiComboBox extends UI5Element {
 			if (filteredItems.length === 0) {
 				this.allItemsPopover.close();
 			} else {
-				this.allItemsPopover.open(this);
+				this.allItemsPopover.showAt(this);
 			}
 		}
 
@@ -533,7 +529,7 @@ class MultiComboBox extends UI5Element {
 		return this.placeholder;
 	}
 
-	_handleLeft() {
+	_handleArrowLeft() {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
 
 		if (cursorPosition === 0) {
@@ -544,14 +540,17 @@ class MultiComboBox extends UI5Element {
 	_tokenizerFocusOut(event) {
 		this._tokenizerFocused = false;
 
-		const tokensCount = this._tokenizer.tokens.length - 1;
+		const tokensCount = this._tokenizer.tokens.length;
+		const selectedTokens = this._selectedTokensCount;
+		const lastTokenBeingDeleted = tokensCount - 1 === 0 && this._deleting;
+		const allTokensAreBeingDeleted = selectedTokens === tokensCount && this._deleting;
 
-		if (!event.relatedTarget || event.relatedTarget.localName !== "ui5-token") {
+		if (!event.relatedTarget || !event.relatedTarget.hasAttribute("ui5-token")) {
 			this._tokenizer.tokens.forEach(token => { token.selected = false; });
 			this._tokenizer.scrollToStart();
 		}
 
-		if (tokensCount === 0 && this._deleting) {
+		if (allTokensAreBeingDeleted || lastTokenBeingDeleted) {
 			setTimeout(() => {
 				if (!isPhone()) {
 					this.shadowRoot.querySelector("input").focus();
@@ -572,30 +571,253 @@ class MultiComboBox extends UI5Element {
 	}
 
 	async _onkeydown(event) {
-		if (isLeft(event)) {
-			this._handleLeft(event);
+		if (isShow(event) && !this.readonly && !this.disabled) {
+			event.preventDefault();
+			this.togglePopover();
 		}
 
-		if (isShow(event) && !this.readonly && !this.disabled) {
+		if (isUp(event) || isDown(event)) {
+			this._handleArrowNavigation(event);
+			return;
+		}
+
+		this._keyDown = true;
+		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
+	}
+
+	_handleBackspace(event) {
+		if (event.target.value === "") {
+			event.preventDefault();
+			this._tokenizer._focusLastToken();
+		}
+	}
+
+	_handleEscape(event) {
+		if (!this.allowCustomValues || (!this.open && this.allowCustomValues)) {
+			this.value = this._lastValue;
+		}
+	}
+
+	_handleHome(event) {
+		const shouldFocusToken = this._isFocusInside && event.target.selectionStart === 0 && this._tokenizer.tokens.length > 0;
+
+		if (shouldFocusToken) {
 			event.preventDefault();
-			this._toggleRespPopover();
+			this._tokenizer.tokens[0].focus();
 		}
+	}
+
+	_handleEnd(event) {
+		const tokens = this._tokenizer.tokens;
+		const lastTokenIdx = tokens.length - 1;
+		const shouldFocusInput = event.target === tokens[lastTokenIdx] && tokens[lastTokenIdx] === this.shadowRoot.activeElement;
 
-		if (isDown(event) && this.allItemsPopover.opened && this.items.length) {
+		if (shouldFocusInput) {
 			event.preventDefault();
-			await this._getList();
-			const firstListItem = this.list.items[0];
+			this._inputDom.focus();
+		}
+	}
+
+	_handleTab(event) {
+		this.allItemsPopover.close();
+	}
+
+	_handleSelectAll(event) {
+		const filteredItems = this._filteredItems;
+		const allItemsSelected = filteredItems.every(item => item.selected);
+
+		filteredItems.forEach(item => {
+			item.selected = !allItemsSelected;
+		});
+
+		this.fireSelectionChange();
+	}
+
+	_onValueStateKeydown(event) {
+		const isArrowDown = isDown(event);
+		const isArrowUp = isUp(event);
+
+		if (isTabNext(event) || isTabPrevious(event)) {
+			this._onItemTab(event);
+			return;
+		}
+
+		event.preventDefault();
+
+		if (isArrowDown) {
+			this._handleArrowDown(event);
+		}
+
+		if (isArrowUp) {
+			this._inputDom.focus();
+		}
+	}
+
+	_onItemKeydown(event) {
+		const isFirstItem = this.list.items[0] === event.target;
+
+		if (isTabNext(event) || isTabPrevious(event)) {
+			this._onItemTab(event);
+			return;
+		}
+
+		event.preventDefault();
+
+		if (isCtrlA(event)) {
+			this._handleSelectAll(event);
+			return;
+		}
+
+		if (((isUp(event) && isFirstItem) || isHome(event)) && this.valueStateHeader) {
+			this.valueStateHeader.focus();
+		}
+
+		if (!this.valueStateHeader && isUp(event) && isFirstItem) {
+			this._inputDom.focus();
+		}
+	}
+
+	_onItemTab(event) {
+		this._inputDom.focus();
+		this.allItemsPopover.close();
+	}
+
+	async _handleArrowNavigation(event) {
+		const isArrowDown = isDown(event);
+		const hasSuggestions = this.items.length;
+		const isOpen = this.allItemsPopover.opened;
+
+		event.preventDefault();
+
+		if (this.hasValueStateMessage && !this.valueStateHeader) {
+			await this._setValueStateHeader();
+		}
+
+		if (isArrowDown && isOpen && this.focused && this.valueStateHeader) {
+			this.valueStateHeader.focus();
+			return;
+		}
+
+		if (isArrowDown && this.focused && hasSuggestions) {
+			this._handleArrowDown(event);
+		}
+
+		if (!isArrowDown && !isOpen && !this.readonly) {
+			this._navigateToPrevItem();
+		}
+	}
+
+	_handleArrowDown(event) {
+		const isOpen = this.allItemsPopover.opened;
+		const firstListItem = this.list.items[0];
+
+		if (isOpen) {
 			this.list._itemNavigation.setCurrentItem(firstListItem);
 			firstListItem.focus();
+		} else if (!this.readonly) {
+			this._navigateToNextItem();
 		}
+	}
 
-		if (isBackSpace(event) && event.target.value === "") {
-			event.preventDefault();
+	_navigateToNextItem() {
+		const items = this.items;
+		const itemsCount = items.length;
+		const previousItemIdx = this.currentItemIdx;
 
-			this._tokenizer._focusLastToken();
+		if (previousItemIdx > -1 && items[previousItemIdx].text !== this.value) {
+			this.currentItemIdx = -1;
 		}
 
-		this._keyDown = true;
+		if (previousItemIdx >= itemsCount - 1) {
+			return;
+		}
+
+		let currentItem = this.items[++this.currentItemIdx];
+
+		while (this.currentItemIdx < itemsCount - 1 && currentItem.selected) {
+			currentItem = this.items[++this.currentItemIdx];
+		}
+
+		if (currentItem.selected === true) {
+			this.currentItemIdx = previousItemIdx;
+			return;
+		}
+
+		this.value = currentItem.text;
+		this._innerInput.value = currentItem.text;
+		this._innerInput.setSelectionRange(0, currentItem.text.length);
+	}
+
+	_navigateToPrevItem() {
+		const items = this.items;
+		let previousItemIdx = this.currentItemIdx;
+
+		if ((!this.value && previousItemIdx !== -1) || (previousItemIdx !== -1 && this.value && this.value !== items[previousItemIdx].text)) {
+			previousItemIdx = -1;
+		}
+
+		if (previousItemIdx === -1) {
+			this.currentItemIdx = items.length;
+		}
+
+		if (previousItemIdx === 0) {
+			this.currentItemIdx = 0;
+			return;
+		}
+
+		let currentItem = this.items[--this.currentItemIdx];
+
+		while (currentItem && currentItem.selected && this.currentItemIdx > 0) {
+			currentItem = this.items[--this.currentItemIdx];
+		}
+
+		if (!currentItem) {
+			return;
+		}
+
+		if (currentItem.selected) {
+			this.currentItemIdx = previousItemIdx;
+			return;
+		}
+
+		this.value = currentItem.text;
+		this._innerInput.value = currentItem.text;
+		this._innerInput.setSelectionRange(0, currentItem.text.length);
+	}
+
+	_handleEnter() {
+		const lowerCaseValue = this.value.toLowerCase();
+		const matchingItem = this.items.find(item => item.text.toLowerCase() === lowerCaseValue);
+		const oldValueState = this.valueState;
+
+		if (matchingItem) {
+			if (matchingItem.selected) {
+				if (this._validationTimeout) {
+					return;
+				}
+
+				this.valueState = "Error";
+				this._performingSelectionTwice = true;
+				this._resetValueState(oldValueState, () => {
+					this._performingSelectionTwice = false;
+				});
+			} else {
+				matchingItem.selected = true;
+				this.value = "";
+				this.fireSelectionChange();
+			}
+
+			this.allItemsPopover.close();
+		}
+	}
+
+	_resetValueState(valueState, callback) {
+		this._validationTimeout = setTimeout(() => {
+			this.valueState = valueState;
+			this._validationTimeout = null;
+
+			callback && callback();
+		}, 2000);
 	}
 
 	_onTokenizerKeydown(event) {
@@ -608,19 +830,27 @@ class MultiComboBox extends UI5Element {
 				}, 0);
 			}
 		}
+
+		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
 	}
 
 	_filterItems(str) {
 		return (Filters[this.filter] || Filters.StartsWithPerTerm)(str, this.items);
 	}
 
+	_afterOpenPicker() {
+		this._toggle();
+
+		if (!isPhone()) {
+			this._innerInput.focus();
+		} else {
+			this.allItemsPopover.focus();
+		}
+	}
+
 	_toggle() {
 		this.open = !this.open;
 		this.fireEvent("open-change");
-
-		if (!this.open) {
-			this._afterClosePopover();
-		}
 	}
 
 	_getSelectedItems() {
@@ -630,23 +860,37 @@ class MultiComboBox extends UI5Element {
 	}
 
 	_listSelectionChange(event) {
-		event.target.items.forEach(item => {
-			this.items.forEach(mcbItem => {
-				if (mcbItem._id === item.getAttribute("data-ui5-token-id")) {
-					mcbItem.selected = item.selected;
-				}
-			});
-		});
+		// sync list items and cb items
+		this.syncItems(event.target.items);
 
-		this.fireSelectionChange();
+		// don't call selection change right after selection as user can cancel it on phone
+		if (!isPhone()) {
+			this.fireSelectionChange();
+		}
 
 		if (!event.detail.selectionComponentPressed && !isSpace(event.detail)) {
 			this.allItemsPopover.close();
 			this.value = "";
+
+			// if the item (not checkbox) is clicked, call the selection change
+			if (isPhone()) {
+				this.fireSelectionChange();
+			}
+
 			this.fireEvent("input");
 		}
 	}
 
+	syncItems(listItems) {
+		listItems.forEach(item => {
+			this.items.forEach(mcbItem => {
+				if (mcbItem._id === item.getAttribute("data-ui5-token-id")) {
+					mcbItem.selected = item.selected;
+				}
+			});
+		});
+	}
+
 	fireSelectionChange() {
 		this.fireEvent("selection-change", { items: this._getSelectedItems() });
 		// Angular 2 way data binding
@@ -663,28 +907,41 @@ class MultiComboBox extends UI5Element {
 		this.list = staticAreaItem.querySelector(".ui5-multi-combobox-all-items-list");
 	}
 
-	_toggleRespPopover() {
-		this.allItemsPopover.toggle(this);
-	}
-
 	_click(event) {
-		if (isPhone() && !this.readonly && !this._showMorePressed) {
-			this.allItemsPopover.open(this);
+		if (isPhone() && !this.readonly && !this._showMorePressed && !this._deleting) {
+			this.allItemsPopover.showAt(this);
 		}
 
 		this._showMorePressed = false;
 	}
 
-	_afterClosePopover() {
+	_afterClosePicker() {
 		// close device's keyboard and prevent further typing
 		if (isPhone()) {
 			this.blur();
 		}
 
+		this._toggle();
+
 		this._iconPressed = false;
 		this.filterSelected = false;
 	}
 
+	_beforeOpen() {
+		this._itemsBeforeOpen = this.items.map(item => {
+			return {
+				ref: item,
+				selected: item.selected,
+			};
+		});
+
+		this._valueBeforeOpen = this.value;
+
+		if (this.filterSelected) {
+			this.selectedItems = this._filteredItems.filter(item => item.selected);
+		}
+	}
+
 	onBeforeRendering() {
 		const input = this.shadowRoot.querySelector("input");
 		this._inputLastValue = this.value;
@@ -693,13 +950,12 @@ class MultiComboBox extends UI5Element {
 			this._filteredItems = this.items;
 		}
 
+		this.items.forEach(item => {
+			item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+		});
+
 		const filteredItems = this._filterItems(this.value);
 		this._filteredItems = filteredItems;
-
-		if (isPhone() && this.allItemsPopover && this.allItemsPopover.opened) {
-			// Set initial focus to the dialog
-			this.allItemsPopover.focus();
-		}
 	}
 
 	async onAfterRendering() {
@@ -708,6 +964,8 @@ class MultiComboBox extends UI5Element {
 
 		this.toggle(this.shouldDisplayOnlyValueStateMessage);
 		this.storeResponsivePopoverWidth();
+
+		this._deleting = false;
 	}
 
 	get _isPhone() {
@@ -732,14 +990,36 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	handleCancel() {
+		this._itemsBeforeOpen.forEach(item => {
+			item.ref.selected = item.selected;
+		});
+
+		this.togglePopover();
+
+		this.value = this._valueBeforeOpen;
+	}
+
+	handleOK() {
+		if (isPhone()) {
+			this.fireSelectionChange();
+		}
+
+		this.togglePopover();
+	}
+
 	async openPopover() {
 		const popover = await this._getPopover();
 
 		if (popover) {
-			popover.openBy(this);
+			popover.showAt(this);
 		}
 	}
 
+	_forwardFocusToInner() {
+		this._innerInput.focus();
+	}
+
 	async closePopover() {
 		const popover = await this._getPopover();
 
@@ -751,28 +1031,52 @@ class MultiComboBox extends UI5Element {
 		return staticAreaItem.querySelector("[ui5-popover]");
 	}
 
+	async _getResponsivePopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector("[ui5-responsive-popover]");
+	}
+
+	async _setValueStateHeader() {
+		const responsivePopover = await this._getResponsivePopover();
+		this.valueStateHeader = responsivePopover.querySelector("div.ui5-responsive-popover-header.ui5-valuestatemessage-root");
+	}
+
 	get _tokenizer() {
 		return this.shadowRoot.querySelector("[ui5-tokenizer]");
 	}
 
 	inputFocusIn() {
-		if (!isPhone()) {
+		if (!isPhone() || this.readonly) {
 			this.focused = true;
+		} else {
+			this._innerInput.blur();
 		}
+
+		!isPhone() && this._innerInput.setSelectionRange(0, this.value.length);
+		this._lastValue = this.value;
 	}
 
 	inputFocusOut(event) {
 		if (!this.shadowRoot.contains(event.relatedTarget) && !this._deleting) {
 			this.focused = false;
+
+			// remove the value if user focus out the input and focus is not going in the popover
+			if (!isPhone() && !this.allowCustomValues && (this.staticAreaItem !== event.relatedTarget)) {
+				this.value = "";
+			}
 		}
 	}
 
+	_readonlyIconClick() {
+		this._inputDom.focus();
+	}
+
 	get editable() {
 		return !this.readonly;
 	}
 
 	get _isFocusInside() {
-		return this.focused || this._tokenizerFocused;
+		return !isPhone() && (this.focused || this._tokenizerFocused);
 	}
 
 	get selectedItemsListMode() {
@@ -792,7 +1096,13 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get valueStateText() {
-		return this.valueStateTextMappings[this.valueState];
+		let key = this.valueState;
+
+		if (this._performingSelectionTwice) {
+			key = "Error_Selection";
+		}
+
+		return this.valueStateTextMappings[key];
 	}
 
 	get valueStateTextId() {
@@ -803,6 +1113,20 @@ class MultiComboBox extends UI5Element {
 		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	 get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get _tokensCountText() {
 		if (!this._tokenizer) {
 			return;
@@ -814,6 +1138,10 @@ class MultiComboBox extends UI5Element {
 		return `${this._id}-hiddenText-nMore`;
 	}
 
+	get _selectedTokensCount() {
+		return this._tokenizer.tokens.filter(token => token.selected).length;
+	}
+
 	get ariaDescribedByText() {
 		return this.valueStateTextId ? `${this._tokensCountTextId} ${this.valueStateTextId}` : `${this._tokensCountTextId}`;
 	}
@@ -823,14 +1151,16 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get shouldDisplayOnlyValueStateMessage() {
-		return this.focused && this.hasValueStateMessage && !this._iconPressed;
+		return this.focused && !this.readonly && this.hasValueStateMessage && !this._iconPressed;
 	}
 
 	get valueStateTextMappings() {
 		return {
-			"Success": this.i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Error": this.i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": this.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": MultiComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Error": MultiComboBox.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Error_Selection": MultiComboBox.i18nBundle.getText(VALUE_STATE_ERROR_ALREADY_SELECTED),
+			"Warning": MultiComboBox.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Information": MultiComboBox.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 
@@ -845,25 +1175,35 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return MultiComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _iconAccessibleNameText() {
-		return this.i18nBundle.getText(SELECT_OPTIONS);
+		return MultiComboBox.i18nBundle.getText(SELECT_OPTIONS);
 	}
 
 	get _dialogOkButton() {
-		return this.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
+		return MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
 	}
 
 	get _tokenizerExpanded() {
 		return (this._isFocusInside || this.open) && !this.readonly;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	get classes() {
 		return {
+			popover: {
+				"ui5-multi-combobox-all-items-responsive-popover": true,
+				"ui5-suggestions-popover": !this.isPhone,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateMessage,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage-header": true,
 				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
@@ -877,16 +1217,15 @@ class MultiComboBox extends UI5Element {
 			popoverValueStateMessage: {
 				"width": `${this._listWidth}px`,
 				"display": this._listWidth === 0 ? "none" : "inline-block",
-				"padding": "0.9125rem 1rem",
 			},
 			popoverHeader: {
-				"max-width": `${this._inputWidth}px`,
+				"max-width": isPhone() ? "100%" : `${this._inputWidth}px`,
 			},
 		};
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		MultiComboBox.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }