Edit => Add to description. Autofocus the textarea.

This commit is contained in:
jahooma 2021-12-16 16:07:37 -06:00
parent ad2f080c6e
commit 325619aa01

View File

@ -21,7 +21,7 @@ function ContractDescription(props: {
}) { }) {
const { contract, isCreator } = props const { contract, isCreator } = props
const [editing, setEditing] = useState(false) 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()) const [description, setDescription] = useState(editStatement())
// Append the new description (after a newline) // Append the new description (after a newline)
@ -40,11 +40,19 @@ function ContractDescription(props: {
{isCreator && {isCreator &&
!contract.resolution && !contract.resolution &&
(editing ? ( (editing ? (
<form> <form className="mt-4">
<textarea <textarea
className="textarea h-24 textarea-bordered w-full" className="textarea h-24 textarea-bordered w-full"
value={description} value={description}
onChange={(e) => setDescription(e.target.value || '')} onChange={(e) => setDescription(e.target.value || '')}
autoFocus
onFocus={(e) =>
// Focus starts at end of description.
e.target.setSelectionRange(
description.length,
description.length
)
}
></textarea> ></textarea>
<Row className="gap-2"> <Row className="gap-2">
<button <button
@ -66,7 +74,7 @@ function ContractDescription(props: {
className="btn btn-neutral btn-outline btn-sm mt-4" className="btn btn-neutral btn-outline btn-sm mt-4"
onClick={() => setEditing(true)} onClick={() => setEditing(true)}
> >
Edit Add to description
</button> </button>
))} ))}
</div> </div>