feat(ui5-select): enhance value property

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

@@ -563,16 +563,46 @@ describe("Form support", () => {
 				<Option value="" selected>Option 3</Option>
 			</Select>
 
+			<Select value="Option 1">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
+			<Select value="option2">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select value="Option 3">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
 			<Select id="select4" name="select4">
 				<Option selected>Option 1</Option>
 				<Option value="option2">Option 2</Option>
 				<Option value="">Option 3</Option>
 			</Select>
+
+			<Select id="select44" name="select44" value="Option 1">
+				<Option selected>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
 			<Select id="select5" name="select5">
 				<Option>Option 1</Option>
 				<Option value="option2" selected>Option 2</Option>
 				<Option value="">Option 3</Option>
 			</Select>
+			<Select id="select55" name="select55" value="option2">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
 			<Select id="select7" name="select7" required>
 				<Option selected>Option 1</Option>
 				<Option value="option2">Option 2</Option>
@@ -589,6 +619,22 @@ describe("Form support", () => {
 				<Option value="" selected>Option 3</Option>
 			</Select>
 
+			<Select id="select77" name="select77" required value="Option 1">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select88" name="select88" required value="option2">
+				<Option>Option 1</Option>
+				<Option value="option2" selected>Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select99" name="select99" required value="Option 3">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
 			<button type="submit">Submits forms</button>
 		</form>);
 
@@ -630,6 +676,17 @@ describe("Form support", () => {
 			.eq(1)
 			.realClick();
 
+		cy.get("#select99")
+			.realClick();
+
+		cy.get("#select99")
+			.should("have.attr", "opened");
+
+		cy.get("#select99")
+			.find("[ui5-option]")
+			.eq(1)
+			.realClick();
+
 		cy.get("button")
 			.realClick();
 
@@ -640,7 +697,7 @@ describe("Form support", () => {
 			.then($el => {
 				return getFormData($el.get(0));
 			})
-			.should("be.equal", "select4=Option 1&select5=option2&select6=&select7=Option 1&select8=option2&select9=option2");
+			.should("be.equal", "select4=Option 1&select44=Option 1&select5=option2&select55=option2&select6=&select7=Option 1&select8=option2&select9=option2&select77=Option 1&select88=option2&select99=option2");
 	});
 
 	it("ui5-slider in form", () => {

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

@@ -3,6 +3,158 @@ import OptionCustom from "../../src/OptionCustom.js";
 import Select from "../../src/Select.js";
 import download from "@ui5/webcomponents-icons/dist/download.js";
 
+describe("Select - value handling", () => {
+	it("tests selection via Select's value", () => {
+		cy.mount(
+			<>
+				<Select value="option2">
+					<Option id="opt1" value="option1">Option 1</Option>
+					<Option id="opt2" value="option2">Option 2</Option>
+					<Option id="opt3" value="option3">Option 3</Option>
+				</Select>
+
+				<Select value="option6">
+					<Option id="opt4" value="option4">Option 4</Option>
+					<Option id="opt5" value="option5">Option 5</Option>
+					<Option id="opt6" value="option6">Option 6</Option>
+				</Select>
+			</>
+		);
+
+		cy.get("#opt2").should("have.attr", "selected");
+		cy.get("#opt6").should("have.attr", "selected");
+	});
+
+	it("tests Select's value has precedence over Option's selected", () => {
+		cy.mount(
+			<>
+				<Select value="option1">
+					<Option id="opt1" value="option1">Option 1</Option>
+					<Option id="opt2" value="option2">Option 2</Option>
+					<Option id="opt3" value="option3" selected={true}>Option 3</Option>
+				</Select>
+
+				<Select value="option6">
+					<Option id="opt4" value="option4">Option 4</Option>
+					<Option id="opt5" value="option5" selected={true}>Option 5</Option>
+					<Option id="opt6" value="option6">Option 6</Option>
+				</Select>
+			</>
+		);
+
+		// assert that Select's value is preferred over Option's selected
+		cy.get("#opt1").should("have.attr", "selected");
+		cy.get("#opt3").should("not.have.attr", "selected");
+		cy.get("#opt5").should("not.have.attr", "selected");
+		cy.get("#opt6").should("have.attr", "selected");
+	});
+
+	it("tests Select's value of an option, added with delay", () => {
+		const addOption = () => {
+			const newOption = document.createElement("ui5-option") as Option;
+			newOption.id = "opt3";
+			newOption.value = "option3";
+			newOption.textContent = "Option 3";
+			document.getElementById("sel")?.appendChild(newOption);
+		};
+
+		cy.mount(
+			<Select id="sel" value="option3">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+			</Select>
+		);
+
+		cy.get("#opt3").should("not.exist");
+
+		cy.wrap(addOption).invoke("call");
+
+		// assert "Option 3" is selected although added after the Select was mounted
+		cy.get("#opt3").should("have.attr", "selected");
+	});
+
+	it("tests Select's value set with a delay", () => {
+		const setValue = () => {
+			const select = document.getElementById("sel") as Select;
+			select.value = "option2";
+		};
+
+		cy.mount(
+			<Select id="sel">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+				<Option id="opt3" value="option3">Option 3</Option>
+			</Select>
+		);
+
+		cy.wrap(setValue).invoke("call");
+
+		// assert "Option 2" is selected after dynamic value change
+		cy.get("#opt2").should("have.attr", "selected");
+	});
+
+	it("tests Select's value of a missing option - auto-selects firsts", () => {
+		cy.mount(
+			<Select id="sel" value="option3">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+			</Select>
+		);
+
+		// assert: Value remains "option3"
+		cy.get("#sel")
+			.should("have.attr", "value", "option3")
+			.invoke("prop", "value", "option3");
+
+		// assert: no option is selected - the Select is displayed empty
+		cy.get("#opt1").should("not.have.attr", "selected");
+		cy.get("#opt2").should("not.have.attr", "selected");
+	});
+
+	it("tests Select's value updated after user interaction", () => {
+		cy.mount(
+			<Select id="sel" value="option3">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+				<Option id="opt3" value="option3">Option 3</Option>
+			</Select>
+		);
+
+		cy.get("#sel")
+			.realClick();
+
+		cy.get("#sel")
+			.should("have.attr", "opened");
+
+		// act: select first option with click
+
+		cy.get("#sel")
+			.find("[ui5-option]")
+			.eq(0)
+			.realClick();
+
+		// assert: value is updated after user interaction
+		cy.get("#sel")
+			.should("have.attr", "value", "option1")
+			.invoke("prop", "value", "option1");
+
+		// act: select second option with keyboard
+		cy.get("#sel")
+			.realClick();
+
+		cy.get("#sel")
+			.realPress("ArrowDown");
+
+		cy.get("#sel")
+			.realPress("Enter");
+
+		// assert: value is updated after ArrowDown + Enter
+		cy.get("#sel")
+		.should("have.attr", "value", "option2")
+		.invoke("prop", "value", "option2");
+	});
+});
+
 describe("Select - Accessibility", () => {
 	it("tests options tooltip is set displayed", () => {
 		const EXPECTED_TOOLTIP = "Tooltip";