feat(ui5-multi-input): initial implementation (#1942)

packages/main/bundle.esm.js

@@ -47,6 +47,7 @@ import Dialog from "./dist/Dialog.js";
 import FileUploader from "./dist/FileUploader.js";
 import Icon from "./dist/Icon.js";
 import Input from "./dist/Input.js";
+import MultiInput from "./dist/MultiInput.js";
 import Label from "./dist/Label.js";
 import Link from "./dist/Link.js";
 import Popover from "./dist/Popover.js";

packages/main/src/DatePicker.js

@@ -475,8 +475,8 @@ class DatePicker extends UI5Element {
 		return this.shadowRoot.querySelector("ui5-input");
 	}
 
-	_handleInputChange() {
-		let nextValue = this._getInput().getInputValue();
+	async _handleInputChange() {
+		let nextValue = await this._getInput().getInputValue();
 		const emptyValue = nextValue === "";
 		const isValid = emptyValue || this._checkValueValidity(nextValue);
 
@@ -494,8 +494,8 @@ class DatePicker extends UI5Element {
 		this.fireEvent("value-changed", { value: nextValue, valid: isValid });
 	}
 
-	_handleInputLiveChange() {
-		const nextValue = this._getInput().getInputValue();
+	async _handleInputLiveChange() {
+		const nextValue = await this._getInput().getInputValue();
 		const emptyValue = nextValue === "";
 		const isValid = emptyValue || this._checkValueValidity(nextValue);
 

packages/main/src/DateRangePicker.js

@@ -249,10 +249,10 @@ class DateRangePicker extends DatePicker {
 		return this.placeholder !== undefined ? this.placeholder : this._displayFormat.concat(" ", this.delimiter, " ", this._displayFormat);
 	}
 
-	_handleInputChange() {
-		const nextValue = this._getInput().getInputValue(),
-			emptyValue = nextValue === "",
-			isValid = emptyValue || this._checkValueValidity(nextValue);
+	async _handleInputChange() {
+		const nextValue = await this._getInput().getInputValue();
+		const emptyValue = nextValue === "";
+		const isValid = emptyValue || this._checkValueValidity(nextValue);
 
 		if (isValid) {
 			this._setValue(nextValue);

packages/main/src/Input.hbs

@@ -29,6 +29,7 @@
 			@keydown="{{_onkeydown}}"
 			@keyup="{{_onkeyup}}"
 			@click={{_click}}
+			@focusin={{innerFocusIn}}
 			data-sap-no-tab-ref
 			data-sap-focus-ref
 			step="{{step}}"
@@ -39,6 +40,8 @@
 			</div>
 		{{/if}}
 
+		{{> postContent }}
+
 		{{#if showSuggestions}}
 			<span id="{{_id}}-suggestionsText" class="ui5-hidden-text">{{suggestionsText}}</span>
 			<span id="{{_id}}-selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
@@ -58,4 +61,5 @@
 </div>
 
 
-{{#*inline "preContent"}}{{/inline}}
+{{#*inline "preContent"}}{{/inline}}
+{{#*inline "postContent"}}{{/inline}}

packages/main/src/Input.js

@@ -547,7 +547,7 @@ class Input extends UI5Element {
 		}
 	}
 
-	onAfterRendering() {
+	async onAfterRendering() {
 		if (!this.firstRendering && !isPhone() && this.Suggestions) {
 			const shouldOpenSuggestions = this.shouldOpenSuggestions();
 
@@ -562,7 +562,8 @@ class Input extends UI5Element {
 
 			if (!isPhone() && shouldOpenSuggestions) {
 				// Set initial focus to the native input
-				this.inputDomRef && this.inputDomRef.focus();
+
+				(await this.getInputDOMRef()).focus();
 			}
 		}
 
@@ -648,9 +649,7 @@ class Input extends UI5Element {
 			return;
 		}
 
-		if (this.popover) {
-			this.popover.close();
-		}
+		this.closePopover();
 
 		this.previousValue = "";
 		this.focused = false; // invalidating property
@@ -677,8 +676,9 @@ class Input extends UI5Element {
 	}
 
 	async _handleInput(event) {
-		await this.getInputDOMRef();
-		if (event.target === this.inputDomRef) {
+		const inputDomRef = await this.getInputDOMRef();
+
+		if (event.target === inputDomRef) {
 			// stop the native event, as the semantic "input" would be fired.
 			event.stopImmediatePropagation();
 		}
@@ -687,7 +687,7 @@ class Input extends UI5Element {
 			- 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.inputDomRef.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
+		const skipFiring = (inputDomRef.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
 
 		!skipFiring && this.fireEventByAction(this.ACTION_USER_INPUT);
 
@@ -709,8 +709,7 @@ class Input extends UI5Element {
 	async _afterOpenPopover() {
 		// Set initial focus to the native input
 		if (isPhone()) {
-			await this.getInputDOMRef();
-			this.inputDomRef.focus();
+			(await this.getInputDOMRef()).focus();
 		}
 	}
 
@@ -741,18 +740,18 @@ class Input extends UI5Element {
 	}
 
 	async openPopover() {
-		this.popover = await this._getPopover();
-		if (this.popover) {
+		const popover = await this._getPopover();
+
+		if (popover) {
 			this._isPopoverOpen = true;
-			this.popover.openBy(this);
+			popover.openBy(this);
 		}
 	}
 
-	closePopover() {
-		if (this.isOpen()) {
-			this._isPopoverOpen = false;
-			this.popover && this.popover.close();
-		}
+	async closePopover() {
+		const popover = await this._getPopover();
+
+		popover && popover.close();
 	}
 
 	async _getPopover() {
@@ -791,14 +790,15 @@ class Input extends UI5Element {
 			? this.valueBeforeItemSelection !== itemText : this.value !== itemText;
 
 		this.hasSuggestionItemSelected = true;
-		this.fireEvent(this.EVENT_SUGGESTION_ITEM_SELECT, { item });
 
 		if (fireInput) {
 			this.value = itemText;
 			this.valueBeforeItemSelection = itemText;
 			this.fireEvent(this.EVENT_INPUT);
 			this.fireEvent(this.EVENT_CHANGE);
 		}
+
+		this.fireEvent(this.EVENT_SUGGESTION_ITEM_SELECT, { item });
 	}
 
 	previewSuggestion(item) {
@@ -839,7 +839,7 @@ class Input extends UI5Element {
 			return;
 		}
 
-		const inputValue = this.getInputValue();
+		const inputValue = await this.getInputValue();
 		const isSubmit = action === this.ACTION_ENTER;
 		const isUserInput = action === this.ACTION_USER_INPUT;
 
@@ -875,28 +875,22 @@ class Input extends UI5Element {
 		}
 	}
 
-	getInputValue() {
-		const inputDOM = this.getDomRef();
-		if (inputDOM) {
-			return this.inputDomRef.value;
+	async getInputValue() {
+		const domRef = this.getDomRef();
+
+		if (domRef) {
+			return (await this.getInputDOMRef()).value;
 		}
 		return "";
 	}
 
 	async getInputDOMRef() {
-		let inputDomRef;
-
-		if (isPhone() && this.Suggestions) {
+		if (isPhone() && this.Suggestions && this.suggestionItems.length) {
 			await this.Suggestions._respPopover();
-			inputDomRef = this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
-		}
-
-		if (!inputDomRef) {
-			inputDomRef = this.getDomRef().querySelector(`#${this.getInputId()}`);
+			return this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
 		}
 
-		this.inputDomRef = inputDomRef;
-		return this.inputDomRef;
+		return this.getDomRef().querySelector(`input`);
 	}
 
 	getLabelableElementId() {

packages/main/src/MultiComboBox.hbs

@@ -21,12 +21,12 @@
 		{{#each items}}
 			{{#if this.selected}}
 				<ui5-token
-				?readonly="{{../readonly}}"
-				class="ui5-multi-combobox-token"
-				data-ui5-id="{{this._id}}"
-				part="token-{{@index}}"
+					?readonly="{{../readonly}}"
+					class="ui5-multi-combobox-token"
+					data-ui5-id="{{this._id}}"
+					part="token-{{@index}}"
+					text="{{this.text}}"
 				>
-					{{this.text}}
 				</ui5-token>
 			{{/if}}
 		{{/each}}

packages/main/src/MultiComboBox.js

@@ -410,7 +410,7 @@ class MultiComboBox extends UI5Element {
 
 		tokenizer.tokens.forEach(token => { token.selected = false; });
 
-		this._tokenizer.contentDom.scrollLeft = 0;
+		this._tokenizer.scrollToStart();
 
 		if (tokensCount === 0 && this._deleting) {
 			setTimeout(() => {

packages/main/src/MultiInput.hbs

@@ -0,0 +1,29 @@
+{{>include "./Input.hbs"}}
+
+{{#*inline "preContent"}}
+	<ui5-tokenizer
+		class="ui5-multi-input-tokenizer"
+		.morePopoverOpener={{this}}
+		.popoverMinWidth={{_inputWidth}}
+		?expanded="{{expandedTokenizer}}"
+		show-more
+		@show-more-items-press={{showMorePress}}
+		@token-delete={{tokenDelete}}
+		@focusout="{{_tokenizerFocusOut}}"
+	>
+		<slot name="tokens"></slot>
+	</ui5-tokenizer>
+{{/inline}}
+
+
+{{#*inline "postContent"}}
+	{{#if showValueHelpIcon}}
+		<ui5-icon
+			@click={{valueHelpPress}}
+			@mousedown={{valueHelpMouseDown}}
+			@mouseup={{valueHelpMouseUp}}
+			input-icon
+			name="value-help"
+		></ui5-icon>
+	{{/if}}
+{{/inline}}