@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/{MonthPicker.js → MonthPicker.ts}

@@ -1,3 +1,6 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
 import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
@@ -18,56 +21,42 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import {
+	MONTH_PICKER_DESCRIPTION,
+// @ts-ignore
+} from "./generated/i18n/i18n-defaults.js";
 import CalendarPart from "./CalendarPart.js";
+import type { ICalendarPicker } from "./Calendar.js";
+
+// Template
 import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.js";
+
+// Styles
 import styles from "./generated/themes/MonthPicker.css.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-monthpicker",
-	properties: /** @lends sap.ui.webcomponents.main.MonthPicker.prototype */ {
-		/**
-		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
-		 * @type {Array}
-		 * @public
-		 */
-		selectedDates: {
-			type: Integer,
-			multiple: true,
-			compareValues: true,
-		},
-
-		_months: {
-			type: Object,
-			multiple: true,
-		},
-
-		_hidden: {
-			type: Boolean,
-			noAttribute: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.MonthPicker.prototype */ {
-		/**
-		 * Fired when the user selects a month (space/enter/click).
-		 * @public
-		 * @event
-		 */
-		change: {},
-		/**
-		 * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
-		 * @since 1.0.0-rc.9
-		 * @public
-		 * @event
-		 */
-		navigate: {},
-	},
-};
+const PAGE_SIZE = 12; // total months on a single page
+const ROW_SIZE = 3; // months per row (4 rows of 3 months each)
+
+type Month = {
+	timestamp: string,
+	focusRef: boolean,
+	_tabIndex: string,
+	selected: boolean,
+	ariaSelected: string,
+	name: string,
+	nameInSecType: string,
+	disabled: boolean,
+	classes: string,
+}
 
-const PAGE_SIZE = 12; // Total months on a single page
-const ROW_SIZE = 3; // Months per row (4 rows of 3 months each)
+type MothInterval = Array<Array<Month>>;
+
+type SelectedMonthChangeEventDetail = {
+	timestamp: number,
+}
 
 /**
  * Month picker component.
@@ -78,15 +67,47 @@ const ROW_SIZE = 3; // Months per row (4 rows of 3 months each)
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MonthPicker
- * @extends CalendarPart
+ * @alias sap.ui.webc.main.MonthPicker
+ * @extends sap.ui.webc.main.CalendarPart
  * @tagname ui5-monthpicker
  * @public
  */
-class MonthPicker extends CalendarPart {
-	static get metadata() {
-		return metadata;
-	}
+@customElement("ui5-monthpicker")
+/**
+ * Fired when the user selects a month via "Space", "Enter" or click.
+ * @public
+ * @event sap.ui.webc.main.MonthPicker#change
+ */
+ @event("change")
+/**
+ * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
+ * @since 1.0.0-rc.9
+ * @public
+ * @event sap.ui.webc.main.MonthPicker#navigate
+ */
+@event("navigate")
+class MonthPicker extends CalendarPart implements ICalendarPicker {
+	/**
+	 * An array of UTC timestamps representing the selected date
+	 * or dates depending on the capabilities of the picker component.
+	 * @type {array}
+	 * @name sap.ui.webc.main.MonthPicker.prototype.selectedDates
+	 * @public
+	 */
+	@property({
+		validator: Integer,
+		multiple: true,
+		compareValues: true,
+	})
+	selectedDates!: Array<number>;
+
+	@property({ type: Object, multiple: true })
+	_months!: MothInterval;
+
+	@property({ type: Boolean, noAttribute: true })
+	_hidden!: boolean;
+
+	static i18nBundle: I18nBundle;
 
 	static get template() {
 		return MonthPickerTemplate;
@@ -96,10 +117,24 @@ class MonthPicker extends CalendarPart {
 		return styles;
 	}
 
+	static async onDefine() {
+		MonthPicker.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
+	get roleDescription() {
+		return MonthPicker.i18nBundle.getText(MONTH_PICKER_DESCRIPTION as I18nText);
+	}
+
 	onBeforeRendering() {
 		this._buildMonths();
 	}
 
+	onAfterRendering() {
+		if (!this._hidden) {
+			this.focus();
+		}
+	}
+
 	_buildMonths() {
 		if (this._hidden) {
 			return;
@@ -108,7 +143,7 @@ class MonthPicker extends CalendarPart {
 		const localeData = getCachedLocaleDataInstance(getLocale());
 		const monthsNames = localeData.getMonthsStandAlone("wide", this._primaryCalendarType);
 
-		const months = [];
+		const months: MothInterval = [];
 		const calendarDate = this._calendarDate; // store the value of the expensive getter
 		const minDate = this._minDate; // store the value of the expensive getter
 		const maxDate = this._maxDate; // store the value of the expensive getter
@@ -127,7 +162,7 @@ class MonthPicker extends CalendarPart {
 			const isFocused = tempDate.getMonth() === calendarDate.getMonth();
 			const isDisabled = this._isOutOfSelectableRange(tempDate, minDate, maxDate);
 
-			const month = {
+			const month: Month = {
 				timestamp: timestamp.toString(),
 				focusRef: isFocused,
 				_tabIndex: isFocused ? "0" : "-1",
@@ -147,7 +182,7 @@ class MonthPicker extends CalendarPart {
 				month.classes += " ui5-mp-item--disabled";
 			}
 
-			const quarterIndex = parseInt(i / ROW_SIZE);
+			const quarterIndex = Math.floor(i / ROW_SIZE);
 
 			if (months[quarterIndex]) {
 				months[quarterIndex].push(month);
@@ -159,52 +194,46 @@ class MonthPicker extends CalendarPart {
 		this._months = months;
 	}
 
-	_getDisplayedSecondaryMonthText(timestamp) {
+	_getDisplayedSecondaryMonthText(timestamp: number) {
 		const monthsName = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp);
 		return convertMonthNumbersToMonthNames(monthsName.firstDate.getMonth(), monthsName.lastDate.getMonth(), this.secondaryCalendarType);
 	}
 
-	onAfterRendering() {
-		if (!this._hidden) {
-			this.focus();
-		}
-	}
-
-	_onkeydown(event) {
+	_onkeydown(e: KeyboardEvent) {
 		let preventDefault = true;
 
-		if (isEnter(event)) {
-			this._selectMonth(event);
-		} else if (isSpace(event)) {
-			event.preventDefault();
-		} else if (isLeft(event)) {
+		if (isEnter(e)) {
+			this._selectMonth(e);
+		} else if (isSpace(e)) {
+			e.preventDefault();
+		} else if (isLeft(e)) {
 			this._modifyTimestampBy(-1);
-		} else if (isRight(event)) {
+		} else if (isRight(e)) {
 			this._modifyTimestampBy(1);
-		} else if (isUp(event)) {
+		} else if (isUp(e)) {
 			this._modifyTimestampBy(-ROW_SIZE);
-		} else if (isDown(event)) {
+		} else if (isDown(e)) {
 			this._modifyTimestampBy(ROW_SIZE);
-		} else if (isPageUp(event)) {
+		} else if (isPageUp(e)) {
 			this._modifyTimestampBy(-PAGE_SIZE);
-		} else if (isPageDown(event)) {
+		} else if (isPageDown(e)) {
 			this._modifyTimestampBy(PAGE_SIZE);
-		} else if (isHome(event) || isEnd(event)) {
-			this._onHomeOrEnd(isHome(event));
-		} else if (isHomeCtrl(event)) {
+		} else if (isHome(e) || isEnd(e)) {
+			this._onHomeOrEnd(isHome(e));
+		} else if (isHomeCtrl(e)) {
 			this._setTimestamp(parseInt(this._months[0][0].timestamp)); // first month of first row
-		} else if (isEndCtrl(event)) {
+		} else if (isEndCtrl(e)) {
 			this._setTimestamp(parseInt(this._months[PAGE_SIZE / ROW_SIZE - 1][ROW_SIZE - 1].timestamp)); // last month of last row
 		} else {
 			preventDefault = false;
 		}
 
 		if (preventDefault) {
-			event.preventDefault();
+			e.preventDefault();
 		}
 	}
 
-	_onHomeOrEnd(homePressed) {
+	_onHomeOrEnd(homePressed: boolean) {
 		this._months.forEach(row => {
 			const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getMonth() === this._calendarDate.getMonth());
 			if (indexInRow !== -1) { // The current month is on this row
@@ -215,67 +244,73 @@ class MonthPicker extends CalendarPart {
 	}
 
 	/**
-	 * Sets the timestamp to an absolute value
-	 * @param value
+	 * Sets the timestamp to an absolute value.
+	 * @param { number } value
 	 * @private
 	 */
-	_setTimestamp(value) {
+	_setTimestamp(value: number) {
 		this._safelySetTimestamp(value);
-		this.fireEvent("navigate", { timestamp: this.timestamp });
+		this.fireEvent("navigate", { timestamp: this.timestamp! });
 	}
 
 	/**
-	 * Modifies timestamp by a given amount of months and, if necessary, loads the prev/next page
-	 * @param amount
+	 * Modifies timestamp by a given amount of months and,
+	 * if necessary, loads the prev/next page.
+	 * @param { number } amount
 	 * @private
 	 */
-	_modifyTimestampBy(amount) {
+	_modifyTimestampBy(amount: number) {
 		// Modify the current timestamp
 		this._safelyModifyTimestampBy(amount, "month");
 
 		// Notify the calendar to update its timestamp
-		this.fireEvent("navigate", { timestamp: this.timestamp });
+		this.fireEvent("navigate", { timestamp: this.timestamp! });
 	}
 
-	_onkeyup(event) {
-		if (isSpace(event)) {
-			this._selectMonth(event);
+	_onkeyup(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			this._selectMonth(e);
 		}
 	}
 
 	/**
-	 * User clicked with the mouser or pressed Enter/Space
-	 * @param event
+	 * Selects a month, when the user clicks or presses "Enter" or "Space".
+	 * @param { Event } e
 	 * @private
 	 */
-	_selectMonth(event) {
-		event.preventDefault();
-		if (event.target.className.indexOf("ui5-mp-item") > -1) {
-			const timestamp = this._getTimestampFromDom(event.target);
+	_selectMonth(e: Event) {
+		e.preventDefault();
+
+		const target = e.target as HTMLElement;
+
+		if (target.className.indexOf("ui5-mp-item") > -1) {
+			const timestamp = this._getTimestampFromDom(target);
 			this._safelySetTimestamp(timestamp);
-			this.fireEvent("change", { timestamp: this.timestamp });
+			this.fireEvent("change", { timestamp: this.timestamp! });
 		}
 	}
 
 	/**
-	 * Called from Calendar.js
+	 * Called by the Calendar component.
 	 * @protected
+	 * @returns { boolean }
 	 */
-	_hasPreviousPage() {
+	_hasPreviousPage(): boolean {
 		return this._calendarDate.getYear() !== this._minDate.getYear();
 	}
 
 	/**
-	 * Called from Calendar.js
+	 * Called by the Calendar component.
 	 * @protected
+	 * @returns { boolean }
 	 */
-	_hasNextPage() {
+	_hasNextPage(): boolean {
 		return this._calendarDate.getYear() !== this._maxDate.getYear();
 	}
 
 	/**
-	 * Called by Calendar.js
-	 * User pressed the "<" button in the calendar header (same as PageUp)
+	 * Called by Calendar.js.
+	 * <b>Note:</b> when the user presses the "<" button in the calendar header (same as "PageUp")
 	 * @protected
 	 */
 	_showPreviousPage() {
@@ -284,14 +319,14 @@ class MonthPicker extends CalendarPart {
 
 	/**
 	 * Called by Calendar.js
-	 * User pressed the ">" button in the calendar header (same as PageDown)
+	 * <b>Note:</b> when the user presses the ">" button in the calendar header (same as "PageDown")
 	 * @protected
 	 */
 	_showNextPage() {
 		this._modifyTimestampBy(PAGE_SIZE);
 	}
 
-	_isOutOfSelectableRange(date, minDate, maxDate) {
+	_isOutOfSelectableRange(date: CalendarDate, minDate: CalendarDate, maxDate: CalendarDate): boolean {
 		const month = date.getMonth();
 		const year = date.getYear();
 		const minYear = minDate.getYear();
@@ -306,3 +341,6 @@ class MonthPicker extends CalendarPart {
 MonthPicker.define();
 
 export default MonthPicker;
+export type {
+	SelectedMonthChangeEventDetail,
+};

package/src/MultiComboBox.hbs

@@ -53,6 +53,7 @@
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
 		aria-label="{{ariaLabelText}}"
+		data-sap-focus-ref
 	/>
 
 	{{#if icon}}

package/src/MultiComboBox.js

@@ -94,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
 		 */
@@ -111,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
@@ -137,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>
@@ -145,6 +145,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -212,7 +214,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -335,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.
 		 *
@@ -355,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
 		 */
@@ -365,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
 		 */
@@ -428,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
@@ -1082,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();
@@ -1326,6 +1328,8 @@ class MultiComboBox extends UI5Element {
 		this.storeResponsivePopoverWidth();
 
 		this._deleting = false;
+		// force resize of the tokenizer on invalidation
+		this._tokenizer._handleResize();
 	}
 
 	get _isPhone() {

package/src/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,9 +18,9 @@ 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 */ {
 	},
 };
 
@@ -31,11 +31,11 @@ const metadata = {
  *
  * @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/src/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/src/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,7 @@ class MultiInput extends Input {
 
 	innerFocusIn() {
 		this.expandedTokenizer = true;
+		this.focused = true;
 		this.tokenizer.scrollToEnd();
 	}
 
@@ -273,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;
 		}
 	}