fix(pick-list): change unselected items to be untabbable when an item…

… is selected (#4177)

* fix(pick-list): change unselected items to be untabbable when an item is selected

* add test to skip unselected items when tabbing to a selected item

* fix(pick-list): change unselected tabs to be untabbable when an item is selected

* aidd listening event when focusing out of the component

* replace previous test to check the tab index is adjusted when focusing out

* clean up white spacing

* change test assertion

* change test html liist

Co-authored-by: Yona Nagayama <yon97701@esri.com>

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");
+    });
   });
 }
 

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);