fix: only focus active elements

vadimdemedes · Sep 19, 2023 · 6c2a1f7 · 6c2a1f7
1 parent 968466f
commit 6c2a1f7
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -236,7 +236,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 {
@@ -247,8 +249,19 @@ export default class App extends PureComponent<Props, State> {
 
 	focusPrevious = (): void => {
 		this.setState(previousState => {
-			const lastFocusableId =
-				previousState.focusables[previousState.focusables.length - 1]?.id;
+			let lastFocusableId: string | undefined;
+			for (
+				let index = previousState.focusables.length - 1;
+				index >= 0;
+				index--
+			) {
+				const focusable = previousState.focusables[index];
+
+				if (focusable?.isActive) {
+					lastFocusableId = focusable.id;
+					break;
+				}
+			}
 
 			const previousFocusableId = this.findPreviousFocusable(previousState);