fix(ui5-multiinput): prevented token-delete event firing when readonly (

#5613) The token-delete event is not fired when the ui5-multiinput component has readonly attribute added. Fixes: #5448
SAP · Aug 3, 2022 · c8f4178 · c8f4178
1 parent 7275652
commit c8f4178
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/packages/main/src/MultiInput.js b/packages/main/src/MultiInput.js
@@ -142,6 +142,10 @@ class MultiInput extends Input {
 		const focusedToken = event.detail.ref;
 		const selectedTokens = this.tokens.filter(token => token.selected);
 
+		if (this._readonly) {
+			return;
+		}
+
 		if (selectedTokens.indexOf(focusedToken) === -1) {
 			selectedTokens.push(focusedToken);
 		}

diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html
@@ -47,6 +47,18 @@ <h1 class="sample-container-title">Multi Input with 1 token</h1>
 			<ui5-token slot="tokens" text="Amet"></ui5-token>
 		</ui5-multi-input>
 
+		<br>
+		<br>
+
+		<h1 class="sample-container-title">Readonly Multi Input with tokens</h1>
+		<ui5-multi-input id="readonly-mi" readonly>
+			<ui5-token slot="tokens" text="Amet"></ui5-token>
+			<ui5-token slot="tokens" text="Dolor"></ui5-token>
+			<ui5-token slot="tokens" text="Lorem"></ui5-token>
+			<ui5-token slot="tokens" text="Ipsum"></ui5-token>
+		</ui5-multi-input>
+
+
 		<br>
 		<br>
 
@@ -373,6 +385,7 @@ <h1 class="sample-container-title">Eventing</h1>
 
 		document.getElementById("suggestion-token").addEventListener("ui5-token-delete", handleTokenDelete);
 		document.getElementById("two-tokens").addEventListener("ui5-token-delete", handleTokenDelete);
+		document.getElementById("readonly-mi").addEventListener("ui5-token-delete", handleTokenDelete);
 
 		const handleTokenDelete2 = (event) => {
 			const eventType = document.getElementById("event-type");

diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js
@@ -38,6 +38,8 @@ describe("MultiInput general interaction", () => {
 	});
 
 	it ("fires value-help-trigger on icon press", async () => {
+		await browser.url(`test/pages/MultiInput.html`);
+
 		const label = await browser.$("#basic-event-listener");
 		const icon = await browser.$("#basic-overflow-and-icon").shadow$("ui5-icon");
 		const EXPECTED_TEXT = "value help icon press"
@@ -138,7 +140,7 @@ describe("MultiInput general interaction", () => {
 
 		assert.strictEqual(await mi1.getAttribute("placeholder"), "Placeholder", "a token is added after selection");
 		assert.strictEqual(await mi2.getAttribute("placeholder"), "", "a token is added after selection");
-	});	
+	});
 
 	it("tests if tokenizer is scrolled to the end when expanded and to start when narrowed", async () => {
 		await browser.url(`test/pages/MultiInput.html`);
@@ -152,14 +154,30 @@ describe("MultiInput general interaction", () => {
 		let tokenizerScrollContainerScrollLeft = await browser.execute(() => document.querySelector("#basic-overflow").shadowRoot.querySelector("ui5-tokenizer").shadowRoot.querySelector(".ui5-tokenizer--content").scrollLeft);
 		let tokenizerScrollContainerScrollWidth = await browser.execute(() => document.querySelector("#basic-overflow").shadowRoot.querySelector("ui5-tokenizer").shadowRoot.querySelector(".ui5-tokenizer--content").scrollWidth);
 		let tokenizerScrollContainerClientWidth = await browser.execute(() => document.querySelector("#basic-overflow").shadowRoot.querySelector("ui5-tokenizer").shadowRoot.querySelector(".ui5-tokenizer--content").getBoundingClientRect().width);
-	
-		assert.strictEqual(tokenizerScrollContainerScrollLeft, Math.floor(tokenizerScrollContainerScrollWidth - tokenizerScrollContainerClientWidth), "tokenizer is scrolled to end");
+
+		assert.strictEqual(Math.floor(tokenizerScrollContainerScrollLeft), Math.floor(tokenizerScrollContainerScrollWidth - tokenizerScrollContainerClientWidth), "tokenizer is scrolled to end");
 
 		await input.keys('Tab');
 		tokenizerScrollContainerScrollLeft = await browser.execute(() => document.querySelector("#basic-overflow").shadowRoot.querySelector("ui5-tokenizer").shadowRoot.querySelector(".ui5-tokenizer--content").scrollLeft);
 
 		assert.strictEqual(tokenizerScrollContainerScrollLeft, 0, "tokenizer is scrolled to start");
 	});
+
+	it("should NOT fire token-delete when MI is readonly", async () => {
+		const input = await browser.$("#readonly-mi");
+		const innerInput = await input.shadow$("input");
+		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");
+		tokens = await input.$$("ui5-token");
+
+		// Assert
+		assert.strictEqual(tokens.length, 4, "The tokenizer has 4 tokens");
+	});
 });
 
 describe("ARIA attributes", () => {