fix(ui5-multiinput): correct backspace behavior in case of value (#13219)

Author: ivoplashkov

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

@@ -1266,7 +1266,7 @@ describe("Keyboard handling", () => {
 			.should("be.focused");
 	});
 
-	it("should focus token last token when caret is at the beginning of the value", () => {
+	it("should not focus token on backspace when input has value and caret is at position 0", () => {
 		cy.mount(
 			<MultiInput id="two-tokens" value="abc">
 				<Token slot="tokens" id="firstToken" text="aa"></Token>
@@ -1288,9 +1288,11 @@ describe("Keyboard handling", () => {
 
 		cy.realPress("Backspace");
 
-		cy.get("[ui5-token]")
-			.eq(1)
+		cy.get("@innerInput")
 			.should("be.focused");
+
+		cy.get("@innerInput")
+			.should("have.value", "abc");
 	});
 
 	// Test is skipped for now as it fails randomly

packages/main/src/MultiInput.ts

@@ -303,14 +303,11 @@ class MultiInput extends Input implements IFormInputElement {
 	}
 
 	_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) {
+		// Only move focus to the last token if the input is empty
+		if (!this.value && lastToken) {
 			e.preventDefault();
 			lastToken.focus();
 			this.tokenizer._itemNav.setCurrentItem(lastToken);