diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 703ef3b668b2..67668d5b598c 100644 --- 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 index 5e68e922eb38..e1b713244b77 100644 --- a/packages/main/test/pages/MultiComboBox.html +++ b/packages/main/test/pages/MultiComboBox.html @@ -320,6 +320,25 @@

MultiComboBox in Compact

+ + +
+ Placeholder test + +
+ Toggle Item + + + + +
+
+ Toggle Item + + + + +
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js index 10ae21c707f2..0972ab78bd0e 100644 --- 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");