@ui5/webcomponents 0.0.0-453158269 → 0.0.0-49cef2d02

package/dist/MultiComboBox.js

@@ -27,10 +27,17 @@ import {
 	isDeleteShift,
 	isInsertShift,
 	isInsertCtrl,
+	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 { isIE, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+	isPhone,
+	isAndroid,
+} from "@ui5/webcomponents-base/dist/Device.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";
@@ -43,6 +50,7 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
 import Icon from "./Icon.js";
@@ -58,6 +66,10 @@ import {
 	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,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
@@ -82,11 +94,11 @@ const metadata = {
 	tag: "ui5-multi-combobox",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
+	slots: /** @lends sap.ui.webc.main.MultiComboBox.prototype */ {
 		/**
 		 * Defines the component items.
 		 *
-		 * @type {sap.ui.webcomponents.main.IMultiComboBoxItem[]}
+		 * @type {sap.ui.webc.main.IMultiComboBoxItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -99,7 +111,7 @@ const metadata = {
 		/**
 		* Defines the icon to be displayed in the component.
 		*
-		* @type {sap.ui.webcomponents.main.IIcon}
+		* @type {sap.ui.webc.main.IIcon}
 		* @slot
 		* @public
 		* @since 1.0.0-rc.9
@@ -125,7 +137,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MultiComboBox.prototype */ {
 		/**
 		 * Defines the value of the component.
 		 * <br><br>
@@ -133,6 +145,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -140,6 +154,18 @@ const metadata = {
 			defaultValue: "",
 		},
 
+		/**
+		 * Defines whether the value will be autcompleted to match an item
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.4.0
+		 */
+		 noTypeahead: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines a short hint intended to aid the user with data entry when the
 		 * component has no value.
@@ -188,7 +214,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -250,7 +276,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -311,7 +337,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
+	events: /** @lends sap.ui.webc.main.MultiComboBox.prototype */ {
 		/**
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
 		 *
@@ -331,7 +357,7 @@ const metadata = {
 		/**
 		 * Fired when the dropdown is opened or closed.
 		 *
-		 * @event sap.ui.webcomponents.main.MultiComboBox#open-change
+		 * @event sap.ui.webc.main.MultiComboBox#open-change
 		 * @since 1.0.0-rc.5
 		 * @public
 		 */
@@ -341,7 +367,7 @@ const metadata = {
 		 * Fired when selection is changed by user interaction
 		 * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
 		 *
-		 * @event sap.ui.webcomponents.main.MultiComboBox#selection-change
+		 * @event sap.ui.webc.main.MultiComboBox#selection-change
 		 * @param {Array} items an array of the selected items.
 		 * @public
 		 */
@@ -404,8 +430,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MultiComboBox
- * @extends UI5Element
+ * @alias sap.ui.webc.main.MultiComboBox
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-multi-combobox
  * @public
  * @appenddocs MultiComboBoxItem MultiComboBoxGroupItem
@@ -447,6 +473,7 @@ class MultiComboBox extends UI5Element {
 			Popover,
 			List,
 			StandardListItem,
+			GroupHeaderListItem,
 			ToggleButton,
 			Button,
 		];
@@ -462,6 +489,7 @@ class MultiComboBox extends UI5Element {
 		this._deleting = false;
 		this._validationTimeout = null;
 		this._handleResizeBound = this._handleResize.bind(this);
+		this.valueBeforeAutoComplete = "";
 		this.currentItemIdx = -1;
 		this.FormSupport = undefined;
 	}
@@ -524,27 +552,16 @@ class MultiComboBox extends UI5Element {
 			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
-		*/
-		const skipFiring = (this._inputDom.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
-
-		if (skipFiring) {
-			event.preventDefault();
-
-			return;
-		}
-
 		if (this._validationTimeout) {
 			input.value = this._inputLastValue;
 			return;
 		}
 
 		if (!filteredItems.length && value && !this.allowCustomValues) {
-			input.value = this._inputLastValue;
+			input.value = this.valueBeforeAutoComplete || this._inputLastValue;
 			this.valueState = "Error";
 
+			this._shouldAutocomplete = false;
 			this._resetValueState(oldValueState);
 
 			return;
@@ -602,7 +619,7 @@ class MultiComboBox extends UI5Element {
 
 		if (!event.relatedTarget || !event.relatedTarget.hasAttribute("ui5-token")) {
 			this._tokenizer.tokens.forEach(token => { token.selected = false; });
-			this._tokenizer.scrollToStart();
+			this._tokenizer.expanded = this._preventTokenizerToggle ? this._tokenizer.expanded : false;
 		}
 
 		if (allTokensAreBeingDeleted || lastTokenBeingDeleted) {
@@ -621,10 +638,6 @@ class MultiComboBox extends UI5Element {
 		this.focused = false;
 	}
 
-	_onkeyup() {
-		this._keyDown = false;
-	}
-
 	async _onkeydown(event) {
 		const isArrowDownCtrl = isDownCtrl(event);
 
@@ -663,8 +676,8 @@ class MultiComboBox extends UI5Element {
 			event.preventDefault();
 		}
 
-		this._keyDown = true;
 		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
+		this._shouldAutocomplete = !this.noTypeahead && !(isBackSpace(event) || isDelete(event) || isEscape(event) || isEnter(event));
 	}
 
 	async _handlePaste(event) {
@@ -738,6 +751,13 @@ class MultiComboBox extends UI5Element {
 	}
 
 	_handleEscape(event) {
+		const innerInput = this._innerInput;
+		const isAutoCompleted = innerInput.selectionEnd - innerInput.selectionStart > 0;
+
+		if (isAutoCompleted) {
+			this.value = this.valueBeforeAutoComplete;
+		}
+
 		if (!this.allowCustomValues || (!this.open && this.allowCustomValues)) {
 			this.value = this._lastValue;
 		}
@@ -794,6 +814,7 @@ class MultiComboBox extends UI5Element {
 		}
 
 		if (isArrowUp || isUpCtrl(event)) {
+			this._shouldAutocomplete = true;
 			this._inputDom.focus();
 		}
 	}
@@ -853,6 +874,7 @@ class MultiComboBox extends UI5Element {
 
 		if (!this.valueStateHeader && isFirstItem && isArrowUp) {
 			this._inputDom.focus();
+			this._shouldAutocomplete = true;
 		}
 	}
 
@@ -886,6 +908,7 @@ class MultiComboBox extends UI5Element {
 		}
 
 		if (isArrowDown && isOpen && this.valueStateHeader) {
+			this.value = this.valueBeforeAutoComplete || this.value;
 			this.valueStateHeader.focus();
 			return;
 		}
@@ -905,6 +928,7 @@ class MultiComboBox extends UI5Element {
 
 		if (isOpen) {
 			this.list._itemNavigation.setCurrentItem(firstListItem);
+			this.value = this.valueBeforeAutoComplete || this.value;
 			firstListItem.focus();
 		} else if (!this.readonly) {
 			this._navigateToNextItem();
@@ -999,8 +1023,9 @@ class MultiComboBox extends UI5Element {
 
 	_handleEnter() {
 		const lowerCaseValue = this.value.toLowerCase();
-		const matchingItem = this.items.find(item => item.text.toLowerCase() === lowerCaseValue);
+		const matchingItem = this.items.find(item => (item.text.toLowerCase() === lowerCaseValue && !item.isGroupItem));
 		const oldValueState = this.valueState;
+		const innerInput = this._innerInput;
 
 		if (this.FormSupport) {
 			this.FormSupport.triggerFormSubmit(this);
@@ -1023,6 +1048,7 @@ class MultiComboBox extends UI5Element {
 				this.fireSelectionChange();
 			}
 
+			innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
 			this.allItemsPopover.close();
 		}
 	}
@@ -1040,7 +1066,7 @@ class MultiComboBox extends UI5Element {
 		const isCtrl = !!(event.metaKey || event.ctrlKey);
 
 		if (isRight(event)) {
-			const lastTokenIndex = this._tokenizer.tokens.length - 1;
+			const lastTokenIndex = this._tokenizer.tokens.length - this._tokenizer.overflownTokens.length - 1;
 
 			if (event.target === this._tokenizer.tokens[lastTokenIndex]) {
 				setTimeout(() => {
@@ -1058,7 +1084,7 @@ class MultiComboBox extends UI5Element {
 			if (isCut) {
 				const cutResult = this._tokenizer._fillClipboard("cut", selectedTokens);
 				selectedTokens.forEach(token => {
-					this._tokenizer._tokenDelete(event, token);
+					this._tokenizer._tokenKeyboardDelete(event, token);
 				});
 
 				this.focus();
@@ -1080,6 +1106,7 @@ class MultiComboBox extends UI5Element {
 		}
 
 		if (isShow(event) && !this.readonly && !this.disabled) {
+			this._preventTokenizerToggle = true;
 			this._handleShow(event);
 		}
 	}
@@ -1155,6 +1182,8 @@ class MultiComboBox extends UI5Element {
 
 			this.fireEvent("input");
 		}
+
+		this.value = this.valueBeforeAutoComplete || "";
 	}
 
 	syncItems(listItems) {
@@ -1200,6 +1229,7 @@ class MultiComboBox extends UI5Element {
 		this._toggle();
 
 		this._iconPressed = false;
+		this._preventTokenizerToggle = false;
 		this.filterSelected = false;
 	}
 
@@ -1219,12 +1249,49 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	_handleTypeAhead(item, filterValue) {
+		if (!item) {
+			return;
+		}
+
+		const value = item.text;
+		const innerInput = this._innerInput;
+
+		filterValue = filterValue || "";
+		this.value = value;
+
+		innerInput.value = value;
+		innerInput.setSelectionRange(filterValue.length, value.length);
+
+		this._shouldAutocomplete = false;
+	}
+
+	_getFirstMatchingItem(current) {
+		if (!this.items.length) {
+			return;
+		}
+
+		const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem && !item.selected);
+
+		if (matchingItems.length) {
+			return matchingItems[0];
+		}
+	}
+
+	_startsWithMatchingItems(str) {
+		return Filters.StartsWith(str, this.items, "text");
+	}
+
 	onBeforeRendering() {
-		const input = this.shadowRoot.querySelector("input");
+		const input = this._innerInput;
+		const autoCompletedChars = input && input.selectionEnd - input.selectionStart;
+		const value = input && input.value;
+
 		this.FormSupport = getFeature("FormSupport");
-		this._inputLastValue = this.value;
+		this._inputLastValue = value;
 
 		if (input && !input.value) {
+			this.valueBeforeAutoComplete = "";
 			this._filteredItems = this.items;
 		}
 
@@ -1232,8 +1299,22 @@ class MultiComboBox extends UI5Element {
 			item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 		});
 
+		if (!input || !value) {
+			return;
+		}
+
+		// Typehead causes issues on Android devices, so we disable it for now
+		// If there is already a selection the autocomplete has already been performed
+		if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars) {
+			const item = this._getFirstMatchingItem(value);
+
+			// Keep the original typed in text intact
+			this.valueBeforeAutoComplete = value;
+			this._handleTypeAhead(item, value);
+		}
+
 		if (this._shouldFilterItems) {
-			this._filteredItems = this._filterItems(this.value);
+			this._filteredItems = this._filterItems(this._shouldAutocomplete || !!autoCompletedChars ? this.valueBeforeAutoComplete : value);
 		} else {
 			this._filteredItems = this.items;
 		}
@@ -1247,6 +1328,8 @@ class MultiComboBox extends UI5Element {
 		this.storeResponsivePopoverWidth();
 
 		this._deleting = false;
+		// force resize of the tokenizer on invalidation
+		this._tokenizer._handleResize();
 	}
 
 	get _isPhone() {
@@ -1326,21 +1409,26 @@ class MultiComboBox extends UI5Element {
 		return this.shadowRoot.querySelector("[ui5-tokenizer]");
 	}
 
-	inputFocusIn() {
+	inputFocusIn(event) {
 		if (!isPhone() || this.readonly) {
 			this.focused = true;
+			this._tokenizer.expanded = true;
 		} else {
 			this._innerInput.blur();
 		}
 
-		!isPhone() && this._innerInput.setSelectionRange(0, this.value.length);
+		if (!isPhone() && ((event.relatedTarget && event.relatedTarget.tagName !== "UI5-STATIC-AREA-ITEM") || !event.relatedTarget)) {
+			this._innerInput.setSelectionRange(0, this.value.length);
+		}
+
 		this._lastValue = this.value;
+		this.valueBeforeAutoComplete = "";
 	}
 
 	inputFocusOut(event) {
 		if (!this.shadowRoot.contains(event.relatedTarget) && !this._deleting) {
 			this.focused = false;
-
+			this._tokenizer.expanded = this.open;
 			// 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 = "";
@@ -1372,7 +1460,19 @@ class MultiComboBox extends UI5Element {
 		return this.hasValueState && this.valueState !== ValueState.Success;
 	}
 
-	get valueStateText() {
+	get ariaValueStateHiddenText() {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+		}
+
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+	}
+
+	get valueStateDefaultText() {
 		let key = this.valueState;
 
 		if (this._performingSelectionTwice) {
@@ -1445,14 +1545,23 @@ class MultiComboBox extends UI5Element {
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	get _innerInput() {
 		if (isPhone()) {
-			if (this.allItemsPopover.opened) {
+			if (this.allItemsPopover && this.allItemsPopover.opened) {
 				return this.allItemsPopover.querySelector("input");
 			}
 		}
 
-		return this.getDomRef().querySelector("#ui5-multi-combobox-input");
+		return this.getDomRef() ? this.getDomRef().querySelector("#ui5-multi-combobox-input") : null;
 	}
 
 	get _headerTitleText() {
@@ -1468,7 +1577,18 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get _tokenizerExpanded() {
-		return (this._isFocusInside || this.open) && !this.readonly;
+		if (isPhone() || this.readonly) {
+			return false;
+		}
+
+		if (this._preventTokenizerToggle) {
+			return this._tokenizer.expanded;
+		}
+
+		const isCurrentlyExpanded = !!this._tokenizer && this._tokenizer.expanded;
+		const shouldBeExpanded = this.focused || this.open || isCurrentlyExpanded;
+
+		return shouldBeExpanded;
 	}
 
 	get _valueStatePopoverHorizontalAlign() {
@@ -1494,6 +1614,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get styles() {
+		const remSizeIxPx = parseInt(getComputedStyle(document.documentElement).fontSize);
 		return {
 			popoverValueStateMessage: {
 				"width": `${this._listWidth}px`,
@@ -1502,6 +1623,10 @@ class MultiComboBox extends UI5Element {
 			popoverHeader: {
 				"max-width": isPhone() ? "100%" : `${this._inputWidth}px`,
 			},
+			suggestionsPopover: {
+				"min-width": `${this._inputWidth}px`,
+				"max-width": (this._inputWidth / remSizeIxPx) > 40 ? `${this._inputWidth}px` : "40rem",
+			},
 		};
 	}
 

package/dist/MultiComboBoxGroupItem.js

@@ -6,7 +6,7 @@ import GroupHeaderListItem from "./GroupHeaderListItem.js";
  */
 const metadata = {
 	tag: "ui5-mcb-group-item",
-	properties: /** @lends sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MultiComboBoxGroupItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -18,24 +18,24 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webc.main.MultiComboBoxGroupItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	events: /** @lends sap.ui.webc.main.MultiComboBoxGroupItem.prototype */ {
 	},
 };
 
 /**
  * @class
- * The <code>ui5-multi-combobox-group-item</code> is type of suggestion item,
+ * The <code>ui5-mcb-group-item</code> is type of suggestion item,
  * that can be used to split the <code>ui5-multi-combobox</code> suggestions into groups.
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MultiComboBoxGroupItem
- * @extends UI5Element
+ * @alias sap.ui.webc.main.MultiComboBoxGroupItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-mcb-group-item
  * @public
- * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
+ * @implements sap.ui.webc.main.IMultiComboBoxItem
  * @since 1.4.0
  */
 class MultiComboBoxGroupItem extends UI5Element {

package/dist/MultiComboBoxItem.js

@@ -5,7 +5,7 @@ import ComboBoxItem from "./ComboBoxItem.js";
  */
 const metadata = {
 	tag: "ui5-mcb-item",
-	properties: /** @lends  sap.ui.webcomponents.main.MultiComboBoxItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MultiComboBoxItem.prototype */ {
 		/**
 		 * Defines the selected state of the component.
 		 * @type {boolean}
@@ -22,10 +22,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MultiComboBoxItem
- * @extends ComboBoxItem
+ * @alias sap.ui.webc.main.MultiComboBoxItem
+ * @extends sap.ui.webc.main.ComboBoxItem
  * @tagname ui5-mcb-item
- * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
+ * @implements sap.ui.webc.main.IMultiComboBoxItem
  * @public
  */
 class MultiComboBoxItem extends ComboBoxItem {

package/dist/MultiInput.js

@@ -15,13 +15,14 @@ import styles from "./generated/themes/MultiInput.css.js";
 import Token from "./Token.js";
 import Tokenizer from "./Tokenizer.js";
 import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/value-help.js";
 
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-multi-input",
-	properties: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MultiInput.prototype */ {
 		/**
 		 * Determines whether a value help icon will be visualized in the end of the input.
 		 * Pressing the icon will fire <code>value-help-trigger</code> event.
@@ -42,11 +43,11 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
+	slots: /** @lends sap.ui.webc.main.MultiInput.prototype */ {
 		/**
 		 * Defines the component tokens.
 		 *
-		 * @type {sap.ui.webcomponents.main.IToken[]}
+		 * @type {sap.ui.webc.main.IToken[]}
 		 * @slot
 		 * @public
 		 */
@@ -54,12 +55,12 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
+	events: /** @lends sap.ui.webc.main.MultiInput.prototype */ {
 		/**
 		 * Fired when the value help icon is pressed
 		 * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.
 		 *
-		 * @event sap.ui.webcomponents.main.MultiInput#value-help-trigger
+		 * @event sap.ui.webc.main.MultiInput#value-help-trigger
 		 * @public
 		 */
 		"value-help-trigger": {},
@@ -67,7 +68,7 @@ const metadata = {
 		/**
 		 * Fired when a token is about to be deleted.
 		 *
-		 * @event sap.ui.webcomponents.main.MultiInput#token-delete
+		 * @event sap.ui.webc.main.MultiInput#token-delete
 		 * @param {HTMLElement} token deleted token.
 		 * @public
 		 */
@@ -97,8 +98,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MultiInput
- * @extends Input
+ * @alias sap.ui.webc.main.MultiInput
+ * @extends sap.ui.webc.main.Input
  * @tagname ui5-multi-input
  * @appenddocs Token
  * @since 1.0.0-rc.9
@@ -141,6 +142,20 @@ class MultiInput extends Input {
 	tokenDelete(event) {
 		const focusedToken = event.detail.ref;
 		const selectedTokens = this.tokens.filter(token => token.selected);
+		const shouldFocusInput = this.tokens.length - 1 === 0 || this.tokens.length === selectedTokens.length;
+
+		if (this._readonly) {
+			return;
+		}
+
+		if (focusedToken) {
+			this.fireEvent("token-delete", { token: focusedToken });
+			if (shouldFocusInput) {
+				this.focus();
+			}
+
+			return;
+		}
 
 		if (selectedTokens.indexOf(focusedToken) === -1) {
 			selectedTokens.push(focusedToken);
@@ -149,8 +164,6 @@ class MultiInput extends Input {
 		selectedTokens.forEach(token => {
 			this.fireEvent("token-delete", { token });
 		});
-
-		this.focus();
 	}
 
 	valueHelpMouseDown(event) {
@@ -175,6 +188,8 @@ class MultiInput extends Input {
 
 	innerFocusIn() {
 		this.expandedTokenizer = true;
+		this.focused = true;
+		this.tokenizer.scrollToEnd();
 	}
 
 	_onkeydown(event) {
@@ -218,8 +233,6 @@ class MultiInput extends Input {
 			}
 		}
 
-		this.tokenizer._handleItemNavigation(event, tokens);
-
 		if (isCtrl && ["c", "x"].includes(event.key.toLowerCase())) {
 			event.preventDefault();
 
@@ -274,6 +287,9 @@ class MultiInput extends Input {
 
 		if (!insideDOM && !insideShadowDom) {
 			this.expandedTokenizer = false;
+
+			// we need to reset tabindex setting by tokenizer
+			this.tokenizer._itemNav._currentIndex = -1;
 		}
 	}