From 69a56aafede8e202e9ecf315696592296d99748e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 4 Jul 2025 16:02:32 +1000
Subject: [PATCH] feat(ui): do not require root ref to focus on prompt

---
 .../SimpleSession/CanvasLaunchpadPanel.tsx         |  6 ++----
 .../LaunchpadGenerateFromTextButton.tsx            | 14 ++++----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx
index 4b41048bf7..0371c39ef6 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx
@@ -1,5 +1,4 @@
 import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
-import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
 import { WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
 import { memo, useCallback } from 'react';
@@ -13,10 +12,9 @@ import { LaunchpadUseALayoutImageButton } from './LaunchpadUseALayoutImageButton
 
 export const CanvasLaunchpadPanel = memo(() => {
   const { t } = useTranslation();
-  const { tab } = useAutoLayoutContext();
   const focusCanvas = useCallback(() => {
-    navigationApi.focusPanel(tab, WORKSPACE_PANEL_ID);
-  }, [tab]);
+    navigationApi.focusPanel('canvas', WORKSPACE_PANEL_ID);
+  }, []);
   return (
     <Flex flexDir="column" h="full" w="full" alignItems="center" gap={2}>
       <Flex flexDir="column" w="full" gap={4} px={14} maxW={768} pt="20vh">
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadGenerateFromTextButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadGenerateFromTextButton.tsx
index 055fb3a2ad..e0bb929a87 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadGenerateFromTextButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadGenerateFromTextButton.tsx
@@ -1,11 +1,10 @@
 import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
 import { LaunchpadButton } from 'features/controlLayers/components/SimpleSession/LaunchpadButton';
-import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
 import { memo, useCallback } from 'react';
 import { PiCursorTextBold, PiTextAaBold } from 'react-icons/pi';
 
-const focusOnPrompt = (el: HTMLElement) => {
-  const promptElement = el.querySelector('.positive-prompt-textarea');
+const focusOnPrompt = () => {
+  const promptElement = document.querySelector('.positive-prompt-textarea');
   if (promptElement instanceof HTMLTextAreaElement) {
     promptElement.focus();
     promptElement.select();
@@ -13,15 +12,10 @@ const focusOnPrompt = (el: HTMLElement) => {
 };
 
 export const LaunchpadGenerateFromTextButton = memo((props: { extraAction?: () => void }) => {
-  const { rootRef } = useAutoLayoutContext();
   const onClick = useCallback(() => {
-    const el = rootRef.current;
-    if (!el) {
-      return;
-    }
-    focusOnPrompt(el);
+    focusOnPrompt();
     props.extraAction?.();
-  }, [props, rootRef]);
+  }, [props]);
   return (
     <LaunchpadButton onClick={onClick} position="relative" gap={8}>
       <Icon as={PiTextAaBold} boxSize={8} color="base.500" />