fix(ui5-multi-combobox): display placeholder consistently (#4920)

* fix(ui5-multi-combobox): display placeholder consistently There was inconsistency when using a placeholder and programatically changing selected items. Fixes #4897
SAP · Mar 23, 2022 · 359d1a3 · 359d1a3
1 parent caceb7c
commit 359d1a3
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 1 deletion.
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -544,7 +544,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get _getPlaceholder() {
-		if (this._tokenizer && this._tokenizer.tokens.length) {
+		if (this._getSelectedItems().length) {
 			return "";
 		}
 

diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
@@ -320,6 +320,25 @@ <h3>MultiComboBox in Compact</h3>
 			<ui5-mcb-item text="Canada" additional-text="CA"></ui5-mcb-item>
 			<ui5-mcb-item text="Chile" additional-text="CL"></ui5-mcb-item>
 		</ui5-multi-combobox>
+	</div>
+
+	<div class="demo-section">
+		<span>Placeholder test</span>
+
+		<br>
+		<ui5-button id="sel">Toggle Item</ui5-button>
+		<ui5-multi-combobox id="mcb-init-selected-item" placeholder="Placeholder" style="width: 300px;">
+			<ui5-mcb-item text="Item1"></ui5-mcb-item>
+			<ui5-mcb-item selected id="mcb1" text="Initially selected"></ui5-mcb-item>
+		</ui5-multi-combobox>
+		<br />
+		<br />
+		<ui5-button id="sel2">Toggle Item</ui5-button>
+		<ui5-multi-combobox id="mcb-init-nonselected-item" placeholder="Placeholder" style="width: 300px;">
+			<ui5-mcb-item text="Item1"></ui5-mcb-item>
+			<ui5-mcb-item id="mcb1_2" text="Initially not selected"></ui5-mcb-item>
+		</ui5-multi-combobox>
+	</div>
 
 	<script>
 		var eventNameInput = document.getElementById("events-input");
@@ -349,6 +368,32 @@ <h3>MultiComboBox in Compact</h3>
 			selectionChangeCounter = 0;
 			openChangeCounter = 0;
 		});
+
+		// Placeholders test
+		const btn = document.getElementById("sel");
+		const mcb1 = document.getElementById("mcb1");
+		const btn2 = document.getElementById("sel2");
+		const mcb1_2 = document.getElementById("mcb1_2");
+
+		let selected = mcb1.hasAttribute("selected");
+		btn.addEventListener("click", () => {
+			if (!selected) {
+				mcb1.setAttribute("selected", selected);
+			} else {
+				mcb1.removeAttribute("selected");
+			}
+			selected = !selected;
+		});
+
+		let selected2 = mcb1_2.hasAttribute("selected");
+		btn2.addEventListener("click", () => {
+			if (!selected2) {
+				mcb1_2.setAttribute("selected", selected2);
+			} else {
+				mcb1_2.removeAttribute("selected");
+			}
+			selected2 = !selected2;
+		});
 	</script>
 
 </body>

diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -1178,6 +1178,34 @@ describe("MultiComboBox general interaction", () => {
 			assert.strictEqual(await mcb2.getAttribute("placeholder"), "", "Shouldn't have placeholder when there are tokens");
 		});
 
+		it("placeholder tests for programatically selected items", async () => {
+			const innerInputSel = "#ui5-multi-combobox-input";
+
+			const mcb1 = await browser.$("#mcb-init-selected-item");
+			let innerInput1 = await mcb1.shadow$(innerInputSel);
+			const toggleItemBtn1 = await browser.$("#sel");
+
+			const mcb2 = await browser.$("#mcb-init-nonselected-item");
+			let innerInput2 = await mcb2.shadow$(innerInputSel);
+			const toggleItemBtn2 = await browser.$("#sel2");
+
+			// Preselected item
+			assert.strictEqual(await innerInput1.getAttribute("placeholder"), "", "Shouldn't have placeholder as there is a preselected item");
+
+			toggleItemBtn1.click();
+
+			innerInput1 = await mcb1.shadow$(innerInputSel);
+			assert.strictEqual(await innerInput1.getAttribute("placeholder"), "Placeholder", "Should have placeholder as the item is programatically deselected");
+
+			// No preselected item
+			assert.strictEqual(await innerInput2.getAttribute("placeholder"), "Placeholder", "Should have placeholder as no item is selected");
+
+			toggleItemBtn2.click();
+
+			innerInput2 = await mcb2.shadow$(innerInputSel);
+			assert.strictEqual(await innerInput2.getAttribute("placeholder"), "", "Shouldn't have placeholder as an item is programatically selected");
+		});
+
 		it ("Should not open value state message when component is in readonly state", async () => {
 			const mcb = await browser.$("#readonly-value-state-mcb");
 			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#readonly-value-state-mcb");