From b1000e30c1d812de64586c495b69fb5a23525aa4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 5 Jun 2023 15:22:29 +1000
Subject: [PATCH] feat(ui): disable keyboard dnd

Need to fix a bug w/ collision detection before enabling it. Will pursue later.
---
 .../web/src/app/components/ImageDnd/ImageDndContext.tsx    | 7 +++++--
 .../components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx b/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx
index 72487f329c..2d669c529a 100644
--- a/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx
+++ b/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx
@@ -46,9 +46,12 @@ const ImageDndContext = (props: ImageDndContextProps) => {
   const touchSensor = useSensor(TouchSensor, {
     activationConstraint: { distance: 15 },
   });
-  const keyboardSensor = useSensor(KeyboardSensor);
+  // TODO: Use KeyboardSensor - needs composition of multiple collisionDetection algos
+  // Alternatively, fix `rectIntersection` collection detection to work with the drag overlay
+  // (currently the drag element collision rect is not correctly calculated)
+  // const keyboardSensor = useSensor(KeyboardSensor);
 
-  const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
+  const sensors = useSensors(mouseSensor, touchSensor);
 
   return (
     <DndContext
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
index 6f667f9f63..1fadd0ada5 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
@@ -70,6 +70,7 @@ const UnifiedCanvasContent = () => {
     return (
       <Box
         ref={setDroppableRef}
+        tabIndex={0}
         sx={{
           w: 'full',
           h: 'full',
@@ -109,6 +110,7 @@ const UnifiedCanvasContent = () => {
   return (
     <Box
       ref={setDroppableRef}
+      tabIndex={-1}
       sx={{
         w: 'full',
         h: 'full',