diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts index 5ac2e7fd..9da34876 100644 --- a/src/scripts/choices.ts +++ b/src/scripts/choices.ts @@ -1845,9 +1845,11 @@ class Choices { nextEl = this.dropdown.element.querySelector(selectableChoiceIdentifier); } } else { - const currentEl = this.dropdown.element.querySelector( - getClassNamesSelector(this.config.classNames.highlightedState), - ); + const currentEl = + this.dropdown.element.querySelector( + getClassNamesSelector(this.config.classNames.highlightedState), + ) ?? + this.dropdown.element.querySelector(getClassNamesSelector(this.config.classNames.selectedState)); if (currentEl) { nextEl = getAdjacentEl(currentEl, selectableChoiceIdentifier, directionInt); } else { diff --git a/test-e2e/tests/select-one.spec.ts b/test-e2e/tests/select-one.spec.ts index 3197f733..03156cf9 100644 --- a/test-e2e/tests/select-one.spec.ts +++ b/test-e2e/tests/select-one.spec.ts @@ -109,6 +109,32 @@ describe(`Choices - select one`, () => { await expect(suite.choices.first()).toHaveClass(/is-highlighted/); await expect(suite.choices.last()).not.toHaveClass(/is-highlighted/); }); + + test('arrow key navigation resumes from selected item after closing without confirming', async ({ + page, + bundle, + }) => { + const suite = new SelectTestSuit(page, bundle, testUrl, testId); + await suite.startWithClick(); + + // Navigate down twice so choices.nth(2) is highlighted, then escape + await suite.input.press('ArrowDown'); + await suite.input.press('ArrowDown'); + await expect(suite.choices.nth(2)).toHaveClass(/is-highlighted/); + await suite.escapeKey(); + await suite.expectHiddenDropdown(); + + // The first choice should still be the selected (confirmed) item + await expect(suite.choices.first()).toHaveClass(/is-selected/); + + // Reopen and press ArrowDown; should move relative to the selected item + await suite.startWithClick(); + await suite.input.press('ArrowDown'); + + // Navigation should continue from the selected item, not restart from item 0 + await expect(suite.choices.first()).not.toHaveClass(/is-highlighted/); + await expect(suite.choices.nth(1)).toHaveClass(/is-highlighted/); + }); }); describe('searching choices', () => {