diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx
index d202c3503642..cb0f25ff567e 100644
--- a/packages/main/cypress/specs/Select.cy.tsx
+++ b/packages/main/cypress/specs/Select.cy.tsx
@@ -1393,4 +1393,50 @@ describe("Select general interaction", () => {
cy.get("[ui5-select]").should("have.prop", "value", "Third");
});
+
+ it("navigates with ArrowDown when initial value does not match any option", () => {
+ cy.mount(
+
+ );
+
+ cy.get("[ui5-select]")
+ .should("have.prop", "value", "missing")
+ .find("[ui5-option][selected]")
+ .should("not.exist");
+
+ cy.get("[ui5-select]").realClick().realPress("ArrowDown");
+
+ cy.get("[ui5-select]")
+ .find("[ui5-option]")
+ .eq(0)
+ .should("have.attr", "selected");
+ cy.get("[ui5-select]").should("have.prop", "value", "A");
+ });
+
+ it("navigates with ArrowUp when initial value does not match any option", () => {
+ cy.mount(
+
+ );
+
+ cy.get("[ui5-select]")
+ .should("have.prop", "value", "missing")
+ .find("[ui5-option][selected]")
+ .should("not.exist");
+
+ cy.get("[ui5-select]").realClick().realPress("ArrowUp");
+
+ cy.get("[ui5-select]")
+ .find("[ui5-option]")
+ .eq(2)
+ .should("have.attr", "selected");
+ cy.get("[ui5-select]").should("have.prop", "value", "C");
+ });
});
\ No newline at end of file
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 1ab1dbc635a9..52b5608b260d 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -768,6 +768,16 @@ class Select extends UI5Element implements IFormInputElement {
_changeSelectedItem(oldIndex: number, newIndex: number) {
const options: Array = this.options;
+ // Normalize: first navigation with Up when nothing selected -> last item
+ if (oldIndex === -1 && newIndex < 0 && options.length) {
+ newIndex = options.length - 1;
+ }
+
+ // Abort on invalid target
+ if (newIndex < 0 || newIndex >= options.length) {
+ return;
+ }
+
const previousOption = options[oldIndex];
const nextOption = options[newIndex];
@@ -775,8 +785,10 @@ class Select extends UI5Element implements IFormInputElement {
return;
}
- previousOption.selected = false;
- previousOption.focused = false;
+ if (previousOption) {
+ previousOption.selected = false;
+ previousOption.focused = false;
+ }
nextOption.selected = true;
nextOption.focused = true;