From f13672a8447cf0a54cb6c3615635468107f64ce1 Mon Sep 17 00:00:00 2001
From: Sampson <jjdsampson@gmail.com>
Date: Sat, 5 Oct 2024 19:35:32 -0500
Subject: [PATCH] positions cursor at end of input when editing

When the user indicates they would like to edit a previous message, we will position the cursor at the end of their previous input.
---
 .../page/components/edit_input/index.tsx         | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/components/ai_chat/resources/page/components/edit_input/index.tsx b/components/ai_chat/resources/page/components/edit_input/index.tsx
index 4327607fb68f..5d13b9a4f10a 100644
--- a/components/ai_chat/resources/page/components/edit_input/index.tsx
+++ b/components/ai_chat/resources/page/components/edit_input/index.tsx
@@ -19,6 +19,21 @@ interface Props {
 
 function EditInput(props: Props) {
   const [text, setText] = React.useState(props.text)
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  React.useEffect(() => {
+    if (textareaRef.current) {
+      /**
+       * When editing, we want the cursor to be positioned
+       * at the end of the text. Typically we would also call
+       * focus() here, but that isn't necessary in this case
+       * because the textarea already has [autoFocus] set.
+       */
+      const length = textareaRef.current.value.length
+      textareaRef.current.setSelectionRange(length, length)
+    }
+  }, [])
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing &&
         !props.isSubmitDisabled) {
@@ -38,6 +53,7 @@ function EditInput(props: Props) {
         data-replicated-value={text}
       >
           <textarea
+            ref={textareaRef}
             value={text}
             onChange={(e) => setText(e.currentTarget.value)}
             onKeyDown={handleKeyDown}