fix(ui5-multi-combobox): delete long tokens when icon is clicked (#6069)

FIXES: #6048
SAP · Dec 1, 2022 · 18e0b6e · 18e0b6e
1 parent 28ef5e8
commit 18e0b6e
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 14 deletions.
diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs
@@ -13,6 +13,7 @@
 	{{#unless readonly}}
 		<div
 			class="ui5-token--icon"
+			@mousedown="{{_mousedown}}"
 			@click="{{_delete}}"
 		>
 			{{#if closeIcon.length}}

diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js
@@ -70,6 +70,15 @@ const metadata = {
 		 */
 		focused: { type: Boolean },
 
+		/**
+		 * Defines whether the token is being deleted
+		 * This flag is used in the ui5-multi-combobox
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		 toBeDeleted: { type: Boolean },
+
 		/**
 		 * Defines the tabIndex of the component.
 		 * @type {string}
@@ -170,6 +179,10 @@ class Token extends UI5Element {
 		this.focused = !this.focused;
 	}
 
+	_mousedown(event) {
+		this.toBeDeleted = true;
+	}
+
 	 _delete() {
 		this.fireEvent("delete");
 	 }
@@ -194,6 +207,10 @@ class Token extends UI5Element {
 		}
 	}
 
+	onBeforeRendering() {
+		this.toBeDeleted = false;
+	}
+
 	get tokenDeletableText() {
 		return Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
 	}

diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js
@@ -448,8 +448,12 @@ class Tokenizer extends UI5Element {
 	}
 
 	_onmousedown(event) {
-		this._itemNav.setCurrentItem(event.target);
-		this._scrollToToken(event.target);
+		if (event.target.hasAttribute("ui5-token")) {
+			if (!event.target.toBeDeleted) {
+				this._itemNav.setCurrentItem(event.target);
+				this._scrollToToken(event.target);
+			}
+		}
 	}
 
 	_toggleTokenSelection(tokens) {

diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
@@ -377,6 +377,12 @@ <h3>MultiComboBox in Compact</h3>
 		</ui5-multi-combobox>
 	</div>
 
+	<div>
+		<ui5-multi-combobox id="mcb-long-token">
+			<ui5-mcb-item selected text="Longest word in the world"></ui5-mcb-item>
+		</ui5-multi-combobox>
+	</div>
+
 	<script>
 		var eventNameInput = document.getElementById("events-input");
 		var eventParamsInput = document.getElementById("events-parameters");

diff --git a/packages/main/test/pages/styles/MultiComboBox.css b/packages/main/test/pages/styles/MultiComboBox.css
@@ -1,32 +1,36 @@
 ui5-multi-combobox {
-    max-width: 560px;
-    width: 100%;
+	max-width: 560px;
+	width: 100%;
 }
 
 .demo-section {
-    margin-top: 30px;
+	margin-top: 30px;
 }
 
 .demo-section ui5-multi-combobox {
-    margin-top: 10px;
+	margin-top: 10px;
 }
 
 ui5-multi-combobox:not(:defined) {
-    display: none;
+	display: none;
 }
 
 .multicombobox1auto {
-    background-color: var(--sapBackgroundColor);
+	background-color: var(--sapBackgroundColor);
 }
 
 .multicombobox2auto {
-    width: 100%
+	width: 100%;
 }
 
 .multicombobox3auto {
-    width: 320px
+	width: 320px;
 }
 
 .multicombobox4auto {
-    width: 360px;
+	width: 360px;
+}
+
+#mcb-long-token {
+	width: 240px;
 }
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -338,13 +338,15 @@ describe("MultiComboBox general interaction", () => {
 
 			assert.strictEqual(await tokenizer.getProperty("expanded"), false, "tokenizer is scrolled when navigating through the tokens");
 
+			tokens = await browser.$("#more-mcb").shadow$$(".ui5-multi-combobox-token");
+
 			await input.click();
-			await tokens[1].click();
-			await tokens[1].keys('F4');
+			await tokens[2].click();
+			await tokens[2].keys('F4');
 
 			assert.strictEqual(await tokenizer.getProperty("expanded"), true, "tokenizer is scrolled when navigating through the tokens");
 
-			await tokens[1].keys('F4');
+			await tokens[2].keys('F4');
 
 			assert.strictEqual(await tokenizer.getProperty("expanded"), true, "tokenizer is scrolled when navigating through the tokens");
 		})
@@ -456,6 +458,26 @@ describe("MultiComboBox general interaction", () => {
 			assert.equal(await listItem.getProperty("focused"), false, "The first item is not focused");
 			assert.equal(await mcb.getProperty("value"), "Cosy", "The input value is autocompleted");
 		});
+
+		it("tests if clicking delete icon of a token removes it from the selection", async () => {
+			await browser.url(`test/pages/MultiComboBox.html`);
+			await browser.setWindowSize(1920, 1080);
+
+			const mcb = await $("#mcb-long-token");
+			const inner = mcb.shadow$("input");
+
+			await mcb.scrollIntoView();
+			await inner.click();
+
+			const token = await mcb.shadow$("ui5-tokenizer ui5-token");
+			const deleteIcon = await token.shadow$(".ui5-token--icon");
+
+			await deleteIcon.click();
+
+			const tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
+
+			assert.strictEqual(tokens.length, 0, "Long token should be deleted" );
+		});
 	});
 
 	describe("keyboard handling", () => {