fix(ui5-multicombobox): Placeholder with tokens hidden (SAP#2785)

Fixes: SAP#2261
NHristov-sap · Feb 9, 2021 · bccfa3a · bccfa3a
1 parent 235a48f
commit bccfa3a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
@@ -35,7 +35,7 @@
 	<input id="ui5-multi-combobox-input"
 		.value="{{value}}"
 		inner-input
-		placeholder="{{placeholder}}"
+		placeholder={{_getPlaceholder}}
 		?disabled={{disabled}}
 		?readonly={{readonly}}
 		value-state="{{valueState}}"

diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -516,6 +516,14 @@ class MultiComboBox extends UI5Element {
 		this.fireSelectionChange();
 	}
 
+	get _getPlaceholder() {
+		if (this._tokenizer && this._tokenizer.tokens.length) {
+			return "";
+		}
+
+		return this.placeholder;
+	}
+
 	_handleLeft() {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
 

diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
@@ -107,7 +107,7 @@
 		<span>Validating input and placeholder </span>
 
 		<br>
-		<ui5-multi-combobox placeholder="Some initial text">
+		<ui5-multi-combobox id="mcb-with-placeholder" placeholder="Some initial text">
 			<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
 			<ui5-mcb-item text="Compact"></ui5-mcb-item>
 			<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>

diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -222,9 +222,8 @@ describe("MultiComboBox general interaction", () => {
 		});
 	});
 
-	describe("keyboard handling", () => {
+	describe("General", () => {
 		browser.url("http://localhost:8080/test-resources/pages/MultiComboBox.html");
-
 		it ("tests two-column layout", () => {
 			const mcb = $("#mcb-two-column-layout");
 			const staticAreaItemClassName = browser.getStaticAreaItemClassName("#mcb-two-column-layout");
@@ -236,6 +235,14 @@ describe("MultiComboBox general interaction", () => {
 			assert.strictEqual(listItem.shadow$(".ui5-li-info").getText(), "DZ", "Additional item text should be displayed");
 			icon.click();
 		});
+
+		it ("placeholder tests", () => {
+			const mcb1 = browser.$("#another-mcb").shadow$("#ui5-multi-combobox-input");
+			const mcb2 = browser.$("#mcb-with-placeholder").shadow$("#ui5-multi-combobox-input");
+
+			assert.strictEqual(mcb1.getAttribute("placeholder"), "Some initial text", "Should have placeholder");
+			assert.strictEqual(mcb2.getAttribute("placeholder"), "", "Shouldn't have placeholder when there are tokens");
+		});
 	});
 
 	describe("ARIA attributes", () => {