fix(ui5-multi-combobox): add value selection on focus (#4804)

Author: niyap

packages/main/src/MultiComboBox.js

@@ -1035,6 +1035,7 @@ class MultiComboBox extends UI5Element {
 			this._innerInput.blur();
 		}
 
+		!isPhone() && this._innerInput.setSelectionRange(0, this.value.length);
 		this._lastValue = this.value;
 	}
 

packages/main/test/pages/MultiComboBox.html

@@ -86,6 +86,17 @@
 		</ui5-multi-combobox>
 	</div>
 
+	<div class="demo-section">
+		<span>allow-custom-values and predefined value</span>
+
+		<br>
+		<ui5-multi-combobox id="multi-acv" allow-custom-values value="com">
+			<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
+			<ui5-mcb-item text="Compact"></ui5-mcb-item>
+			<ui5-mcb-item text="Condensed"></ui5-mcb-item>
+		</ui5-multi-combobox>
+	</div>
+
 	<div class="demo-section">
 		<span>Validating input and placeholder </span>
 

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

@@ -684,6 +684,32 @@ describe("MultiComboBox general interaction", () => {
 			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
 		});
 
+		it ("tests text selection on focus", async () => {
+			const mcb = await browser.$("#multi-acv");
+			const mcb2 = await browser.$("#mcb-with-placeholder");
+			
+			await mcb.click();
+
+			const selectionStartIndex = await browser.execute(() => {
+				return document.querySelector("#multi-acv").shadowRoot.querySelector("input").selectionStart;
+			});
+			const selectionEndIndex = await browser.execute(() => {
+				return document.querySelector("#multi-acv").shadowRoot.querySelector("input").selectionEnd;
+			});
+
+			assert.equal(await selectionStartIndex, 0, "The selection starts from the beginning of the value");
+			assert.equal(await selectionEndIndex, 3, "The whole value is selected");
+
+			await mcb.keys("Tab");
+			assert.equal(await mcb2.getProperty("focused"), true, "The next control is focused");
+
+			await mcb2.keys(["Shift", "Tab"]);
+			assert.equal(await selectionStartIndex, 0, "The selection starts from the beginning of the value");
+			assert.equal(await selectionEndIndex, 3, "The whole value is selected");
+
+
+		});
+
 		it ("tests two-column layout", async () => {
 			const mcb = await browser.$("#mcb-two-column-layout");
 			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-two-column-layout");