diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index 1d7029959a0..2ca69b96f5e 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -1308,5 +1308,133 @@ describe("calcite-dropdown", () => {
expect(await isElementFocused(page, "#item-3")).toBe(true);
});
+
+ it("should open the dropdown and focus the first item with ArrowDown", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+ Open
+
+ 1
+ 2
+ 3
+
+
+ `);
+ await skipAnimations(page);
+
+ const dropdown = await page.find("calcite-dropdown");
+ await dropdown.callMethod("setFocus");
+ await page.waitForChanges();
+
+ await page.keyboard.press("ArrowDown");
+ await page.waitForChanges();
+ expect(await dropdown.getProperty("open")).toBe(true);
+ expect(await isElementFocused(page, "#item-1")).toBe(true);
+
+ await page.keyboard.press("ArrowDown");
+ await page.waitForChanges();
+ expect(await isElementFocused(page, "#item-2")).toBe(true);
+
+ await page.keyboard.press("ArrowUp");
+ await page.waitForChanges();
+ expect(await isElementFocused(page, "#item-1")).toBe(true);
+ });
+
+ it("should open the dropdown and focus the last item with ArrowUp", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+ Open
+
+ 1
+ 2
+ 3
+
+
+ `);
+ await skipAnimations(page);
+
+ const dropdown = await page.find("calcite-dropdown");
+ await dropdown.callMethod("setFocus");
+ await page.waitForChanges();
+
+ await page.keyboard.press("ArrowUp");
+ await page.waitForChanges();
+ expect(await dropdown.getProperty("open")).toBe(true);
+ expect(await isElementFocused(page, "#item-3")).toBe(true);
+
+ await page.keyboard.press("ArrowDown");
+ await page.waitForChanges();
+ expect(await isElementFocused(page, "#item-1")).toBe(true);
+
+ await page.keyboard.press("ArrowUp");
+ await page.waitForChanges();
+ expect(await isElementFocused(page, "#item-3")).toBe(true);
+ });
+
+ it("should open the dropdown and focus the selected item with ArrowDown", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+ Open
+
+ 1
+ 2
+ 3
+
+
+ `);
+ await skipAnimations(page);
+
+ const dropdown = await page.find("calcite-dropdown");
+ await dropdown.callMethod("setFocus");
+ await page.waitForChanges();
+
+ await page.keyboard.press("ArrowDown");
+ await page.waitForChanges();
+ expect(await dropdown.getProperty("open")).toBe(true);
+ expect(await isElementFocused(page, "#item-2")).toBe(true);
+
+ await page.keyboard.press("ArrowDown");
+ await page.waitForChanges();
+ expect(await isElementFocused(page, "#item-3")).toBe(true);
+
+ await page.keyboard.press("ArrowUp");
+ await page.waitForChanges();
+ expect(await isElementFocused(page, "#item-2")).toBe(true);
+ });
+
+ it("should open the dropdown and focus the selected item with ArrowUp", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+ Open
+
+ 1
+ 2
+ 3
+
+
+ `);
+ await skipAnimations(page);
+
+ const dropdown = await page.find("calcite-dropdown");
+ await dropdown.callMethod("setFocus");
+ await page.waitForChanges();
+
+ await page.keyboard.press("ArrowUp");
+ await page.waitForChanges();
+ expect(await dropdown.getProperty("open")).toBe(true);
+ expect(await isElementFocused(page, "#item-2")).toBe(true);
+
+ await page.keyboard.press("ArrowUp");
+ await page.waitForChanges();
+ expect(await isElementFocused(page, "#item-1")).toBe(true);
+
+ await page.keyboard.press("ArrowDown");
+ await page.waitForChanges();
+ expect(await isElementFocused(page, "#item-2")).toBe(true);
+ });
});
});
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index bbaa77711b0..8e6d5ced616 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -238,7 +238,7 @@ export class Dropdown