From ffac7a5542d6595d29c92997b6d928462d8252de Mon Sep 17 00:00:00 2001
From: Andrew Dibble <andrew@chainflip.io>
Date: Tue, 19 Sep 2023 13:38:20 +0200
Subject: [PATCH] fix: only focus active elements

---
 src/components/App.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index f6518160..894e4e7a 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -250,7 +250,9 @@ export default class App extends PureComponent<Props, State> {
 
 	focusNext = (): void => {
 		this.setState(previousState => {
-			const firstFocusableId = previousState.focusables[0]?.id;
+			const firstFocusableId = previousState.focusables.find(
+				focusable => focusable.isActive
+			)?.id;
 			const nextFocusableId = this.findNextFocusable(previousState);
 
 			return {
@@ -261,8 +263,9 @@ export default class App extends PureComponent<Props, State> {
 
 	focusPrevious = (): void => {
 		this.setState(previousState => {
-			const lastFocusableId = previousState.focusables.at(-1)?.id;
-
+			const lastFocusableId = previousState.focusables.findLast(
+				(focusable) => focusable.isActive
+			)?.id;
 			const previousFocusableId = this.findPreviousFocusable(previousState);
 
 			return {