From 5a21407156ffce2d47cb1d538bab1b72cc1435f7 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Fri, 4 Oct 2024 09:04:10 +1000
Subject: [PATCH] add a fallback focus and clean up code comments

---
 .../src/Filter/FilterSelect/FilterSelect.spec.tsx           | 2 +-
 .../src/__future__/Select/subcomponents/ListBox/ListBox.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx b/packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx
index 037fda59e12..298c3d4df15 100644
--- a/packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx
+++ b/packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx
@@ -222,7 +222,7 @@ describe("Stringified object values", () => {
             label: "Created by Z-A",
           },
         ]}
-        selectedKey={'{"sortBy":"creator_name","sortOrder":"asc"}'}
+        selectedKey='{"sortBy":"creator_name","sortOrder":"asc"}'
       />
     )
     expect(
diff --git a/packages/components/src/__future__/Select/subcomponents/ListBox/ListBox.tsx b/packages/components/src/__future__/Select/subcomponents/ListBox/ListBox.tsx
index 530deea60b3..2e3c5945b6d 100644
--- a/packages/components/src/__future__/Select/subcomponents/ListBox/ListBox.tsx
+++ b/packages/components/src/__future__/Select/subcomponents/ListBox/ListBox.tsx
@@ -31,7 +31,8 @@ const getOptionKeyFromCollection = (
   return state.collection.getFirstKey()
 }
 
-// This makes the use of query selector less brittle in instances where a failed selector is passed in
+/** This makes the use of query selector less brittle in instances where a failed selector is passed in
+ */
 const safeQuerySelector = (selector: string): HTMLElement | null => {
   try {
     return document.querySelector(selector)
@@ -72,6 +73,9 @@ export const ListBox = <Option extends SelectOption>({
 
       if (focusToElement) {
         focusToElement.focus()
+      } else {
+        // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
+        ref.current?.focus()
       }
     }
   }, [isClientReady])