From fa1ebd9d2fbe1582813aa99ad4fd398ce2d270fc Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 31 Mar 2025 13:55:14 +1000
Subject: [PATCH] fix(ui): do not switch between images when focused on a tab
 element

Arrow keys should only navigate between tabs, not gallery images.
---
 .../src/features/gallery/hooks/useGalleryHotkeys.ts  | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
index 418f6a8feb..b69c6aa949 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
@@ -49,7 +49,11 @@ export const useGalleryHotkeys = () => {
   useRegisteredHotkeys({
     id: 'galleryNavLeft',
     category: 'gallery',
-    callback: () => {
+    callback: (e) => {
+      // Skip the hotkey if the user is focused on a tab element - the arrow keys are used to navigate between tabs.
+      if (e.target instanceof HTMLElement && e.target.getAttribute('role') === 'tab') {
+        return;
+      }
       if (isOnFirstImageOfView && isPrevEnabled && !queryResult.isFetching) {
         goPrev('arrow');
         return;
@@ -71,7 +75,11 @@ export const useGalleryHotkeys = () => {
   useRegisteredHotkeys({
     id: 'galleryNavRight',
     category: 'gallery',
-    callback: () => {
+    callback: (e) => {
+      // Skip the hotkey if the user is focused on a tab element - the arrow keys are used to navigate between tabs.
+      if (e.target instanceof HTMLElement && e.target.getAttribute('role') === 'tab') {
+        return;
+      }
       if (isOnLastImageOfView && isNextEnabled && !queryResult.isFetching) {
         goNext('arrow');
         return;