diff --git a/src/components/pick-list/shared-list-tests.ts b/src/components/pick-list/shared-list-tests.ts
index 2cec0fb5719..c6eb4e0dedb 100644
--- a/src/components/pick-list/shared-list-tests.ts
+++ b/src/components/pick-list/shared-list-tests.ts
@@ -201,6 +201,25 @@ export function keyboardNavigation(listType: ListType): void {
 
       expect(await getFocusedItemValue(page)).toEqual("two");
     });
+
+    it("resets tabindex to selected item when focusing out of list", async () => {
+      const page = await newE2EPage({
+        html: `
+        <calcite-${listType}-list>
+          <calcite-${listType}-list-item value="one" label="One" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
+        </calcite-${listType}-list>
+      `
+      });
+
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      expect(await getFocusedItemValue(page)).toEqual(null);
+
+      await page.keyboard.down("Shift");
+      await page.keyboard.press("Tab");
+      expect(await getFocusedItemValue(page)).toEqual("one");
+    });
   });
 }
 
diff --git a/src/components/value-list/value-list.tsx b/src/components/value-list/value-list.tsx
index 1b11662c53b..ff069485f99 100644
--- a/src/components/value-list/value-list.tsx
+++ b/src/components/value-list/value-list.tsx
@@ -14,6 +14,7 @@ import {
 import { CSS, ICON_TYPES } from "./resources";
 import {
   ListFocusId,
+  calciteListFocusOutHandler,
   calciteListItemChangeHandler,
   calciteListItemValueChangeHandler,
   cleanUpObserver,
@@ -158,6 +159,11 @@ export class ValueList<
    */
   @Event() calciteListOrderChange: EventEmitter<any[]>;
 
+  @Listen("focusout")
+  calciteListFocusOutHandler(event: FocusEvent): void {
+    calciteListFocusOutHandler.call(this, event);
+  }
+
   @Listen("calciteListItemRemove")
   calciteListItemRemoveHandler(event: CustomEvent<void>): void {
     removeItem.call(this, event);