fix(ui5-multi-combobox): fix long token deletion (#12514)

* fix(ui5-multi-combobox): fix long token deletion issue

fixes: #12423

Author: ndeshev

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

@@ -332,6 +332,43 @@ describe("General", () => {
 			.should("have.been.called");
 	});
 
+	it("Should delete token when clicking on token decline icon - regression test for long token deletion fix", () => {
+		cy.mount(
+			<MultiComboBox noValidation={true}>
+				<MultiComboBoxItem selected={true} text="This is an extremely long token text that will definitely trigger the problematic code path in the deletion flow and should be properly deletable"></MultiComboBoxItem>
+				<MultiComboBoxItem selected={true} text="Item"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("[ui5-multi-combobox]")
+			.as("mcb")
+			.shadow()
+			.find("[ui5-tokenizer]")
+			.as("tokenizer")
+			.invoke('on', 'ui5-token-delete', cy.spy().as('tokenDelete'));
+
+		// The first token is the long one and should be hidden in the n-more, so we target the second token
+		cy.get("@tokenizer")
+			.find("[ui5-token]")
+			.eq(1)
+			.as("token")
+			.should("exist");
+
+		cy.get("@token")
+			.shadow()
+			.find("[ui5-icon]")
+			.realClick();
+
+		cy.get("@tokenDelete")
+			.should("have.been.calledOnce")
+			.should("have.been.calledWithMatch", Cypress.sinon.match(event => {
+				return event.detail.tokens.length === 1;
+			}));
+
+		cy.get("@token")
+			.should("not.exist");
+	});
+
 	it("Autocomplete (typeahead)", () => {
 		cy.mount(
 			<MultiComboBox>

packages/main/src/Token.ts

@@ -194,11 +194,6 @@ class Token extends UI5Element implements IToken {
 		}
 	}
 
-	onBeforeRendering() {
-		this.toBeDeleted = false;
-		// this.fireMyEvent("select");
-	}
-
 	get tokenDeletableText() {
 		return Token.i18nBundle.getText(TOKEN_ARIA_REMOVE);
 	}

packages/main/src/Tokenizer.ts

@@ -945,6 +945,14 @@ class Tokenizer extends UI5Element implements IFormInputElement {
 	}
 
 	_onfocusin(e: FocusEvent) {
+		const target = e.target as Token;
+
+		if (target && target.toBeDeleted) {
+			this._tokenDeleting = true;
+
+			return;
+		}
+
 		this.open = false;
 		this.expanded = true;
 		this._addTokenToNavigation(e.target as Token);

packages/main/test/pages/MultiComboBox.html

@@ -66,6 +66,7 @@
 
 		<br>
 		<ui5-multi-combobox no-validation id="multi1" accessible-name="MultiComboBox with predefined values">
+			<ui5-mcb-item selected text="Longest word in the whole universe"></ui5-mcb-item>
 			<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
 			<ui5-mcb-item text="Compact"></ui5-mcb-item>
 			<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>