focus on prompt textarea when exiting view mode by clicking

invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx

@@ -24,18 +24,25 @@ export const ParamNegativePrompt = memo(() => {
     },
     [dispatch]
   );
-  const { onChange, isOpen, onClose, onOpen, onSelect, onKeyDown } = usePrompt({
+  const { onChange, isOpen, onClose, onOpen, onSelect, onKeyDown, onFocusCursorAtEnd } = usePrompt({
     prompt,
     textareaRef,
     onChange: _onChange,
   });
 
+  const handleFocus = useCallback(() => {
+    setTimeout(() => {
+      onFocusCursorAtEnd();
+    }, 500);
+  }, [onFocusCursorAtEnd]);
+
   if (viewMode) {
     return (
       <ViewModePrompt
         prompt={prompt}
         presetPrompt={activeStylePreset?.preset_data.negative_prompt || ''}
         height={DEFAULT_HEIGHT}
+        onExit={handleFocus}
       />
     );
   }

invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx

@@ -30,12 +30,18 @@ export const ParamPositivePrompt = memo(() => {
     },
     [dispatch]
   );
-  const { onChange, isOpen, onClose, onOpen, onSelect, onKeyDown, onFocus } = usePrompt({
+  const { onChange, isOpen, onClose, onOpen, onSelect, onKeyDown, onFocus, onFocusCursorAtEnd } = usePrompt({
     prompt,
     textareaRef: textareaRef,
     onChange: handleChange,
   });
 
+  const handleFocus = useCallback(() => {
+    setTimeout(() => {
+      onFocusCursorAtEnd();
+    }, 500);
+  }, [onFocusCursorAtEnd]);
+
   const focus: HotkeyCallback = useCallback(
     (e) => {
       onFocus();
@@ -52,6 +58,7 @@ export const ParamPositivePrompt = memo(() => {
         prompt={prompt}
         presetPrompt={activeStylePreset?.preset_data.positive_prompt || ''}
         height={DEFAULT_HEIGHT}
+        onExit={handleFocus}
       />
     );
   }

invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx

@@ -10,10 +10,12 @@ export const ViewModePrompt = ({
   presetPrompt,
   prompt,
   height,
+  onExit,
 }: {
   presetPrompt: string;
   prompt: string;
   height: number;
+  onExit: () => void;
 }) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -24,7 +26,8 @@ export const ViewModePrompt = ({
 
   const handleExitViewMode = useCallback(() => {
     dispatch(viewModeChanged(false));
-  }, [dispatch]);
+    onExit();
+  }, [dispatch, onExit]);
 
   return (
     <Flex
@@ -42,7 +45,7 @@ export const ViewModePrompt = ({
           {presetChunks.map((chunk, index) => {
             return (
               chunk && (
-                <Text as="span" color={index === 1 ? 'white' : 'base.300'}>
+                <Text as="span" color={index === 1 ? 'white' : 'base.300'} key={index}>
                   {chunk.trim()}{' '}
                 </Text>
               )

invokeai/frontend/web/src/features/prompt/usePrompt.ts

@@ -58,6 +58,13 @@ export const usePrompt = ({ prompt, textareaRef, onChange: _onChange }: UseInser
     textareaRef.current?.focus();
   }, [textareaRef]);
 
+  const onFocusCursorAtEnd = useCallback(() => {
+    onFocus();
+    if (textareaRef.current) {
+      textareaRef.current.setSelectionRange(prompt.length, prompt.length);
+    }
+  }, [onFocus, textareaRef, prompt]);
+
   const handleClosePopover = useCallback(() => {
     onClose();
     onFocus();
@@ -89,5 +96,6 @@ export const usePrompt = ({ prompt, textareaRef, onChange: _onChange }: UseInser
     onSelect,
     onKeyDown,
     onFocus,
+    onFocusCursorAtEnd,
   };
 };