fix(ui5-tokenizer): fix token-delete event details (#10630)

Fixes the token-delete event details, because currently upon clicking the "X" of a token the token-delete event provides wrong token, actually undefined (as this.tokens returns the slot HTML elements, while this._tokens gets the slotted elements, the tokens, later correctly passed with the event as event.details.tokens).

Fixes: #10612

packages/main/cypress/specs/Tokenizer.cy.tsx

@@ -1,5 +1,12 @@
 import Tokenizer from "../../src/Tokenizer.js";
 import Token from "../../src/Token.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base/dist/index.js";
+
+const onTokenDelete = (event: UI5CustomEvent<Tokenizer, "token-delete">) => {
+	event.detail.tokens.forEach(token => {
+		(event.target as Tokenizer).removeChild(token);
+	});
+};
 
 describe("Tokenizer - multi-line and Clear All", () => {
 	it("'Clear All' link is rendered for multi-line tokenizer and show-clear-all set to true", () => {
@@ -124,4 +131,43 @@ describe("Tokenizer - multi-line and Clear All", () => {
 		cy.get("@delete")
 			.should("have.been.calledOnce");
 	});
+
+	it("tests token removal", () => {
+		cy.mount(
+			<Tokenizer id="test-token-delete" style={{ width: "100px" }} onTokenDelete={onTokenDelete}>
+				<Token text="aute"></Token>
+				<Token text="ad"></Token>
+				<Token text="exercitation"></Token>
+				<Token text="esse"></Token>
+				<Token text="labore"></Token>
+				<Token text="amet"></Token>
+				<Token text="excepteur"></Token>
+			</Tokenizer>
+		);
+
+		cy.get("#test-token-delete")
+			.find("[ui5-token]")
+			.should("have.length", 7);
+
+		cy.get("#test-token-delete")
+			.shadow()
+			.find(".ui5-tokenizer-more-text")
+			.realClick();
+
+		cy.get("#test-token-delete")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("be.visible");
+
+		cy.get("#test-token-delete")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-list] [ui5-li]").eq(0)
+			.shadow()
+			.find(".ui5-li-deletebtn [ui5-button]")
+			.realClick();
+
+		cy.get("#test-token-delete")
+			.find("[ui5-token]")
+			.should("have.length", 6);
+	});
 });

packages/main/src/Tokenizer.ts

@@ -1155,7 +1155,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	getTokenByRefId(refId: string) {
-		return this.tokens.find(token => token._id === refId)!;
+		return this._tokens.find(token => token._id === refId)!;
 	}
 }
 

packages/main/test/pages/MultiInput.html

@@ -387,6 +387,20 @@ <h1 class="sample-container-title">Custom Suggestions</h1>
 		</ui5-multi-input>
 	</div>
 
+
+	<h1 class="sample-container-title">Token delete</h1>
+
+	<ui5-multi-input show-suggestions id="test-token-delete">
+		<ui5-token slot="tokens" text="Aute"></ui5-token>
+		<ui5-token slot="tokens" text="ad"></ui5-token>
+		<ui5-token slot="tokens" text="exercitation"></ui5-token>
+		<ui5-token slot="tokens" text="esse"></ui5-token>
+		<ui5-token slot="tokens" text="labore"></ui5-token>
+		<ui5-token slot="tokens" text="amet"></ui5-token>
+		<ui5-token slot="tokens" text="aute"></ui5-token>
+		<ui5-token slot="tokens" text="excepteur"></ui5-token>
+	</ui5-multi-input>
+
 	<script>
 
 		var createTokenFromText = function (text) {
@@ -470,6 +484,7 @@ <h1 class="sample-container-title">Custom Suggestions</h1>
 		}
 
 		document.getElementById("token-unique").addEventListener("ui5-token-delete", handleTokenDelete);
+		document.getElementById("test-token-delete").addEventListener("ui5-token-delete", handleTokenDelete);
 		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);