From d43f4c8c3287aa59c57f714b15b028f5d4be0426 Mon Sep 17 00:00:00 2001
From: Robert Knight <95928279+microbit-robert@users.noreply.github.com>
Date: Wed, 12 Feb 2025 18:13:52 +0000
Subject: [PATCH] Fix isFocusable for FocusList component (#10378)

* Fix isFocusable for FocusList component

* Use explicit check for null
---
 react-common/components/controls/FocusList.tsx | 2 +-
 react-common/components/util.tsx               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/react-common/components/controls/FocusList.tsx b/react-common/components/controls/FocusList.tsx
index 8e316a2f7fe6..17944aaa640a 100644
--- a/react-common/components/controls/FocusList.tsx
+++ b/react-common/components/controls/FocusList.tsx
@@ -59,7 +59,7 @@ export const FocusList = (props: FocusListProps) => {
 
     const isFocusable = (e: HTMLElement) => {
         return e.getAttribute("data-isfocusable") === "true"
-            && getComputedStyle(e).display !== "none";
+            && e.offsetParent !== null;
     }
 
     const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
diff --git a/react-common/components/util.tsx b/react-common/components/util.tsx
index 09c8c8e1ecfe..c29c5d542485 100644
--- a/react-common/components/util.tsx
+++ b/react-common/components/util.tsx
@@ -111,7 +111,7 @@ export function findNextFocusableElement(elements: HTMLElement[], focusedIndex:
             index += increment;
         }
     }
-    return findNextFocusableElement(elements, focusedIndex, index, forward);
+    return findNextFocusableElement(elements, focusedIndex, index, forward, isFocusable);
 }
 
 export function isFocusable(e: HTMLElement) {