From 0d37c74c28ee468416ca84a4b9c0573041f3b9f9 Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Thu, 23 May 2024 09:41:28 +0300
Subject: [PATCH] fix(ui5-multi-input): delete selected value on BACKSPACE
 (#8982)

* fix(ui5-multi-input): delete selected value on BACKSPACE

* fix(ui5-multi-input): adjust condition

---------

Co-authored-by: Nia Peeva <niya.peeva@sap.com>
---
 packages/main/src/MultiInput.ts             | 22 +++++++++++-
 packages/main/test/specs/MultiInput.spec.js | 37 +++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
index 9c24480ae5e5..27c36a7e333f 100644
--- a/packages/main/src/MultiInput.ts
+++ b/packages/main/src/MultiInput.ts
@@ -223,11 +223,16 @@ class MultiInput extends Input {
 			return this._focusFirstToken(e);
 		}
 
-		if (isLeft(e) || isBackSpace(e)) {
+		if (isLeft(e)) {
 			this._skipOpenSuggestions = true;
 			return this._handleLeft(e);
 		}
 
+		if (isBackSpace(e)) {
+			this._skipOpenSuggestions = true;
+			return this._handleBackspace(e);
+		}
+
 		this._skipOpenSuggestions = false;
 
 		if (isShow(e)) {
@@ -299,6 +304,21 @@ class MultiInput extends Input {
 		}
 	}
 
+	_handleBackspace(e: KeyboardEvent) {
+		const cursorPosition = this.getDomRef()!.querySelector(`input`)!.selectionStart;
+		const selectionEnd = this.getDomRef()!.querySelector(`input`)!.selectionEnd;
+		const isValueSelected = cursorPosition === 0 && selectionEnd === this.value.length;
+		const tokens = this.tokens;
+		const lastToken = tokens.length && tokens[tokens.length - 1];
+
+		// selectionStart property applies only to inputs of types text, search, URL, tel, and password
+		if ((!this.value || (this.value && cursorPosition === 0 && !isValueSelected)) && lastToken) {
+			e.preventDefault();
+			lastToken.focus();
+			this.tokenizer._itemNav.setCurrentItem(lastToken);
+		}
+	}
+
 	_focusFirstToken(e: KeyboardEvent) {
 		const tokens = this.tokens;
 		const firstToken = tokens.length && tokens[0];
diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js
index 849bc41f490c..4c56359ad65c 100644
--- a/packages/main/test/specs/MultiInput.spec.js
+++ b/packages/main/test/specs/MultiInput.spec.js
@@ -9,6 +9,9 @@ const getTokenizerPopoverId = async (inputId) => {
 	}, inputId);
 }
 
+const isMacOS = process.platform === 'darwin';
+const keyCtrlToPress = isMacOS ? 'Command' : 'Control';
+
 describe("MultiInput general interaction", () => {
 	before(async () => {
 		await browser.url(`test/pages/MultiInput.html`);
@@ -563,6 +566,40 @@ describe("Keyboard handling", () => {
 		assert.ok(await lastToken.getProperty("focused"), "The last token is focused on Backspace");
 	});
 
+	it("should focus token last token when caret is at the beginning of the value", async () => {
+		const input = await browser.$("#two-tokens");
+		const innerInput = await input.shadow$("input");
+		const lastToken = await browser.$("#two-tokens ui5-token#secondToken");
+
+		// Act
+		await innerInput.click();
+		await browser.keys("ArrowLeft");
+		await browser.keys("ArrowLeft");
+		await browser.keys("ArrowLeft");
+		await browser.keys("Backspace");
+
+		assert.ok(await lastToken.getProperty("focused"), "The last token is focused on Backspace");
+	});
+
+	it("should delete value on backspace", async () => {
+		const input = await browser.$("#two-tokens");
+		const innerInput = await input.shadow$("input");
+		const lastToken = await browser.$("#two-tokens ui5-token#secondToken");
+
+		// Act
+		await innerInput.click();
+		await browser.keys([keyCtrlToPress, "a"]);
+		await browser.keys("Backspace");
+
+		// Assert
+		assert.strictEqual(await input.getProperty("value"), "", "Value is deleted on Backspace");
+
+		await browser.keys("Backspace");
+
+		assert.notOk(await input.getProperty("focused"), "The input loses focus on Backspace");
+		assert.ok(await lastToken.getProperty("focused"), "The last token is focused on Backspace");
+	});
+
 	it("should delete token on backspace", async () => {
 		const input = await browser.$("#two-tokens");
 		const innerInput = await input.shadow$("input");