From 789ef7b4eb91557da89b1a170972143ee7383684 Mon Sep 17 00:00:00 2001
From: Nikoleta Terzieva <nikoleta.ivanova.terzieva@sap.com>
Date: Thu, 19 Sep 2024 13:29:45 +0300
Subject: [PATCH] fix(ui5-multi-input): tokens are not deletable when
 multi-input is readonly-tokens

Fixes #9862
---
 packages/main/src/MultiInput.ts             |  4 ++
 packages/main/test/specs/MultiInput.spec.js | 42 +++++++++++++++++----
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
index 2a9a3f3b845a..09316f2c08cc 100644
--- a/packages/main/src/MultiInput.ts
+++ b/packages/main/src/MultiInput.ts
@@ -337,6 +337,10 @@ class MultiInput extends Input implements IFormInputElement {
 
 		this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
 		this.tokenizerAvailable = this.tokens && this.tokens.length > 0;
+
+		if (this.tokenizer) {
+			this.tokenizer.readonly = this.readonly;
+		}
 	}
 
 	onAfterRendering() {
diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js
index c728df0e9fb0..045223f26fa2 100644
--- a/packages/main/test/specs/MultiInput.spec.js
+++ b/packages/main/test/specs/MultiInput.spec.js
@@ -154,19 +154,45 @@ describe("MultiInput general interaction", () => {
 		assert.strictEqual(await mi2.getAttribute("placeholder"), "", "a token is added after selection");
 	});
 
-	it("should NOT fire token-delete when MI is readonly", async () => {
+	it("Tokens should not have delete icon when MI is readonly", async () => {
 		const input = await browser.$("#readonly-mi");
-		const deleteIcon = input.$$("ui5-token")[0].shadow$("ui5-icon");
 
-		// Act
-		await deleteIcon.click();
-		await browser.keys("Backspace");
-		await browser.keys("Backspace");
-		await browser.keys("Delete");
 		const tokens = await input.$$("ui5-token");
+		const length = tokens.length;
+		let numTokensWithDeleteIcon = 0;
+
+		for (const token of tokens) {
+			const icon = await token.shadow$("ui5-icon");
+			if (await icon.isExisting()){
+				numTokensWithDeleteIcon++;
+			}
+		};
+
+		// Assert
+		assert.strictEqual(length, 4, "The tokenizer has 4 tokens");
+		assert.strictEqual(numTokensWithDeleteIcon, 0, "Tokens should not have delete icon");
+	});
+
+	it("Tokens should not have delete icon when MI is readonly and displayed in n-more popover", async () => {
+		const input = await browser.$("#readonly-mi");
+		const tokenizer = await input.shadow$("ui5-tokenizer");
+		const nMoreLabel = await tokenizer.shadow$(".ui5-tokenizer-more-text");
+
+		await nMoreLabel.click();
+
+		const tokens = await tokenizer.shadow$("ui5-responsive-popover").$$("ui5-li");
+		let numTokensWithDeleteIcon = 0;
+
+		for (const listItem of tokens) {
+			const closeBtn = await listItem.shadow$("ui5-button");
+			if (await closeBtn.isExisting()){
+				numTokensWithDeleteIcon++;
+			}
+		};
 
 		// Assert
-		assert.strictEqual(tokens.length, 4, "The tokenizer has 4 tokens");
+		assert.strictEqual(tokens.length, 4, "The tokenizer popover has 4 tokens");
+		assert.strictEqual(numTokensWithDeleteIcon, 0, "Tokens in list should not have delete icon");
 	});
 
 	it("should empty the field when value is cleared in the change handler", async () => {