fix(ui5-multi-input): fix multiple token addition (#8144)

* fix(ui5-multi-input): fix multiple token addition Fixes: #8049
SAP · Jan 22, 2024 · 94590e1 · 94590e1
1 parent 7b4dac3
commit 94590e1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
@@ -196,7 +196,6 @@ class Tokenizer extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		this._nMoreCount = this.overflownTokens.length;
 		this._tokensCount = this._getTokens().length;
 
 		this._tokens.forEach(token => {
@@ -268,6 +267,8 @@ class Tokenizer extends UI5Element {
 	}
 
 	async onAfterRendering() {
+		this._nMoreCount = this.overflownTokens.length;
+
 		if (!this._getTokens().length) {
 			const popover = await this.getPopover();
 			popover.close();
@@ -624,6 +625,10 @@ class Tokenizer extends UI5Element {
 	}
 
 	get _nMoreText() {
+		if (!this._nMoreCount) {
+			return;
+		}
+
 		if (this._getVisibleTokens().length) {
 			return Tokenizer.i18nBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, this._nMoreCount);
 		}

diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html
@@ -199,6 +199,16 @@ <h1 class="sample-container-title">Multi Input without tokens</h1>
 		<br>
 		<br>
 
+		<h1 class="sample-container-title">Add multiple tokens</h1>
+		<ui5-multi-input id="no-tokens2"></ui5-multi-input>
+		<br>
+		<br>
+
+		<ui5-button id="add-multiple-tokens">Add more tokens</ui5-button>
+
+		<br>
+		<br>
+
 		<h1 class="sample-container-title">Multi Input with 1 token</h1>
 		<ui5-multi-input id="single-token">
 			<ui5-token slot="tokens" text="Amet"></ui5-token>
@@ -380,6 +390,11 @@ <h1 class="sample-container-title">Eventing</h1>
 			addTokenToMI(createTokenFromText("test"), "no-tokens");
 		});
 
+		document.getElementById("add-multiple-tokens").addEventListener("click", function(event) {
+			addTokenToMI(createTokenFromText("One"), "no-tokens2");
+			addTokenToMI(createTokenFromText("Two"), "no-tokens2");
+		});
+
 		document.getElementById("add-to-single").addEventListener("click", function(event) {
 			addTokenToMI(createTokenFromText("test"), "single-token");
 		});

diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js
@@ -90,6 +90,20 @@ describe("MultiInput general interaction", () => {
 		assert.notOk(await allTokens[1].getProperty("overflows"), "Token should not overflow");
 	});
 
+	it ("adds multiple tokens to multi input", async () => {
+		const mi = await browser.$("#no-tokens2");
+		const btn = await browser.$("#add-multiple-tokens");
+
+		await btn.click();
+
+		assert.strictEqual((await mi.$$("ui5-token")).length, 2, "should have 2 tokens");
+
+		let allTokens = await mi.$$("ui5-token");
+
+		assert.notOk(await allTokens[0].getProperty("overflows"), "Token 1 should not overflow");
+		assert.notOk(await allTokens[1].getProperty("overflows"), "Token 2 should not overflow");
+	});
+
 	it ("adds an overflowing token to multi input", async () => {
 		const mi = await browser.$("#multiple-token");
 		const btn = await browser.$("#add-to-multiple");