diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx index fcbcfa495c..0ab9f3c8f5 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx +++ b/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 ( ); } diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx index b716d853ac..81676c5381 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx +++ b/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} /> ); } diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx index 0d269734fa..249a01719c 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx +++ b/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 ( { return ( chunk && ( - + {chunk.trim()}{' '} ) diff --git a/invokeai/frontend/web/src/features/prompt/usePrompt.ts b/invokeai/frontend/web/src/features/prompt/usePrompt.ts index 911afa978c..0399794921 100644 --- a/invokeai/frontend/web/src/features/prompt/usePrompt.ts +++ b/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, }; };