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;