fix(ui5-multiinput): hide placeholder when tokens (#2789)

Fixes: #2261
SAP · Feb 6, 2021 · 679dae3 · 679dae3
1 parent d6a7b81
commit 679dae3
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
@@ -14,7 +14,7 @@
 			?disabled="{{disabled}}"
 			?readonly="{{_readonly}}"
 			.value="{{value}}"
-			placeholder="{{placeholder}}"
+			placeholder="{{_placeholder}}"
 			maxlength="{{maxlength}}"
 			role="{{accInfo.input.role}}"
 			aria-owns="{{accInfo.input.ariaOwns}}"

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -1176,6 +1176,14 @@ class Input extends UI5Element {
 		return isPhone();
 	}
 
+	/**
+	 * Returns the placeholder value.
+	 * @protected
+	 */
+	get _placeholder() {
+		return this.placeholder;
+	}
+
 	/**
 	 * Returns the caret position inside the native input
 	 * @protected

diff --git a/packages/main/src/MultiInput.js b/packages/main/src/MultiInput.js
@@ -278,6 +278,18 @@ class MultiInput extends Input {
 		return `${this._id}-hiddenText-nMore`;
 	}
 
+	/**
+	 * Returns the placeholder value when there are no tokens.
+	 * @protected
+	 */
+	get _placeholder() {
+		if (this.tokenizer && this.tokenizer._tokens.length) {
+			return "";
+		}
+
+		return this.placeholder;
+	}
+
 	get accInfo() {
 		const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId} ${this.suggestionsCount}`.trim();
 		return {

diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html
@@ -54,7 +54,7 @@
 		<h1>Basic API</h1>
 
 		<h1 class="sample-container-title">Empty Multi Input</h1>
-		<ui5-multi-input></ui5-multi-input>
+		<ui5-multi-input id="empty-mi" placeholder="Placeholder"></ui5-multi-input>
 
 		<br>
 		<br>
@@ -278,8 +278,8 @@ <h1>Test value-help-trigger with F4 and Alt + ArrowUp/Down</h1>
 	</div>
 
 	<div>
-		<ui5-title>MultiInput with tokesn with custom icon</ui5-title>
-		<ui5-multi-input style="width: 500px;">
+		<ui5-title>MultiInput with tokens with custom icon</ui5-title>
+		<ui5-multi-input id="mi-with-tokens-customicon" placeholder="Placeholder" style="width: 500px;">
 			<ui5-token slot="tokens" text="Menu">
 				<ui5-icon name="menu" accessible-name="Menu here" slot="closeIcon"></ui5-icon>
 			</ui5-token>

diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js
@@ -4,7 +4,7 @@ const getTokenizerPopoverId = (inputId) => {
 	return browser.execute(async (inputId) => {
 		const input = await document.querySelector(`#${inputId}`);
 		const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef());
-		
+
 		return staticAreaItem.host.classList[0];
 	}, inputId);
 }
@@ -22,19 +22,19 @@ describe("MultiInput general interaction", () => {
 
 		assert.ok(!basicTokenizer.getProperty("expanded"), "Tokenizer should not be expanded");
 	});
-	
+
 	it ("tests opening of tokenizer Popover", () => {
 		const tokenizer = $("#basic-overflow").shadow$("ui5-tokenizer");
 		const nMoreLabel = tokenizer.shadow$(".ui5-tokenizer-more-text");
-		
+
 		nMoreLabel.click();
 
 		const rpoClassName = getTokenizerPopoverId("basic-overflow");
 		const rpo = $(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
 
 		assert.ok(rpo.getProperty("opened"), "More Popover should be open");
 	});
-	
+
 	it ("fires value-help-trigger on icon press", () => {
 		const label = $("#basic-event-listener");
 		const icon = $("#basic-overflow-and-icon").shadow$("ui5-icon");
@@ -47,7 +47,7 @@ describe("MultiInput general interaction", () => {
 
 		// assert
 		assert.strictEqual(label.getText(), EXPECTED_TEXT, "value help press event is fired");
-		
+
 	});
 
 	it ("fires value-help-trigger with F4 and Alt/Option + ArrowUp/Down", () => {
@@ -123,6 +123,14 @@ describe("MultiInput general interaction", () => {
 		assert.ok(!popover.getProperty("opened"), "Suggestion Popovoer is closed");
 		assert.strictEqual(mi.$$("ui5-token").length, 1, "a token is added after selection");
 	});
+
+	it ("Placeholder", () => {
+		const mi1 = browser.$("#empty-mi").shadow$(".ui5-input-inner");
+		const mi2 = browser.$("#mi-with-tokens-customicon").shadow$(".ui5-input-inner");
+
+		assert.strictEqual(mi1.getAttribute("placeholder"), "Placeholder", "a token is added after selection");
+		assert.strictEqual(mi2.getAttribute("placeholder"), "", "a token is added after selection");
+	});
 });
 
 describe("ARIA attributes", () => {