From 325619aa01fe9a15a6a27688635c15c1ff23c554 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Thu, 16 Dec 2021 16:07:37 -0600
Subject: [PATCH] Edit => Add to description. Autofocus the textarea.

---
 web/components/contract-overview.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index 9ce07ecd..0ab43dd5 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -21,7 +21,7 @@ function ContractDescription(props: {
 }) {
   const { contract, isCreator } = props
   const [editing, setEditing] = useState(false)
-  const editStatement = () => `EDIT (${dayjs().format('MMM D, H:mma')}): `
+  const editStatement = () => `${dayjs().format('MMM D, H:mma')}: `
   const [description, setDescription] = useState(editStatement())
 
   // Append the new description (after a newline)
@@ -40,11 +40,19 @@ function ContractDescription(props: {
       {isCreator &&
         !contract.resolution &&
         (editing ? (
-          <form>
+          <form className="mt-4">
             <textarea
               className="textarea h-24 textarea-bordered w-full"
               value={description}
               onChange={(e) => setDescription(e.target.value || '')}
+              autoFocus
+              onFocus={(e) =>
+                // Focus starts at end of description.
+                e.target.setSelectionRange(
+                  description.length,
+                  description.length
+                )
+              }
             ></textarea>
             <Row className="gap-2">
               <button
@@ -66,7 +74,7 @@ function ContractDescription(props: {
             className="btn btn-neutral btn-outline btn-sm mt-4"
             onClick={() => setEditing(true)}
           >
-            Edit
+            Add to description
           </button>
         ))}
     </div>