fix(ui5-multi-input): focus tokens on BACKSPACE for inputs of type 'N…

…umber' and 'Email' (#8897)

* fix(ui5-multi-input): prevent double value state message on nMore open

fixes: #8586

packages/main/src/Input.ts

@@ -340,6 +340,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 	 *
 	 * - The particular effect of this property differs depending on the browser
 	 * and the current language settings, especially for type `Number`.
+	 * - Due to browser constraints, certain keyboard interactions may not be available
+	 * for the 'Number' and 'Email' types.
 	 * - The property is mostly intended to be used with touch devices
 	 * that use different soft keyboard layouts depending on the given input type.
 	 * @default "Text"

packages/main/src/MultiInput.ts

@@ -291,7 +291,8 @@ class MultiInput extends Input {
 		const tokens = this.tokens;
 		const lastToken = tokens.length && tokens[tokens.length - 1];
 
-		if (cursorPosition === 0 && lastToken) {
+		// selectionStart property applies only to inputs of types text, search, URL, tel, and password
+		if (((cursorPosition === null && !this.value) || cursorPosition === 0) && lastToken) {
 			e.preventDefault();
 			lastToken.focus();
 			this.tokenizer._itemNav.setCurrentItem(lastToken);

packages/main/test/specs/MultiInput.spec.js

@@ -548,6 +548,21 @@ describe("Keyboard handling", () => {
 		assert.equal(await input.getProperty("focused"), true, "The input is focused");
 	});
 
+	it("should focus token on backspace for inputs of type 'Number' and 'Email'", async () => {
+		const input = await browser.$("#two-tokens");
+		const innerInput = await input.shadow$("input");
+		const lastToken = await browser.$("#two-tokens ui5-token#secondToken");
+
+		// Act
+		await input.setProperty("value", "");
+		await input.setProperty("type", "Number");
+
+		await innerInput.click();
+		await browser.keys("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");