From c4291f21366250efd172a2a895848bbb0387390c Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Sun, 28 Jan 2024 03:09:11 +0300
Subject: [PATCH] fix(ui): block gallery navigation when staging images on
 canvas

---
 .../gallery/hooks/useGalleryHotkeys.ts        | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
index f802b290cf..75df186dd7 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
@@ -1,11 +1,22 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
 import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
+import { useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 /**
  * Registers gallery hotkeys. This hook is a singleton.
  */
 export const useGalleryHotkeys = () => {
+  const activeTabName = useAppSelector(activeTabNameSelector);
+  const isStaging = useAppSelector(isStagingSelector);
+  // block navigation on Unified Canvas tab when staging new images
+  const canNavigateGallery = useMemo(() => {
+    return activeTabName !== 'unifiedCanvas' || !isStaging;
+  }, [activeTabName, isStaging]);
+
   const {
     areMoreImagesAvailable,
     handleLoadMoreImages,
@@ -18,14 +29,17 @@ export const useGalleryHotkeys = () => {
   useHotkeys(
     'left',
     () => {
-      handleLeftImage();
+      canNavigateGallery && handleLeftImage();
     },
-    [handleLeftImage]
+    [handleLeftImage, canNavigateGallery]
   );
 
   useHotkeys(
     'right',
     () => {
+      if (!canNavigateGallery) {
+        return;
+      }
       if (isOnLastImage && areMoreImagesAvailable && !isFetching) {
         handleLoadMoreImages();
         return;
@@ -34,7 +48,7 @@ export const useGalleryHotkeys = () => {
         handleRightImage();
       }
     },
-    [isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage]
+    [isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage, canNavigateGallery]
   );
 
   useHotkeys(