diff --git a/client/src/components/production-list-columns/production-list-columns.comment.component.jsx b/client/src/components/production-list-columns/production-list-columns.comment.component.jsx index b2e730842..43d27c40a 100644 --- a/client/src/components/production-list-columns/production-list-columns.comment.component.jsx +++ b/client/src/components/production-list-columns/production-list-columns.comment.component.jsx @@ -1,7 +1,7 @@ import Icon from "@ant-design/icons"; import { useMutation } from "@apollo/client/react"; import { Button, Input, Popover, Tooltip } from "antd"; -import { useState } from "react"; +import { useState, useRef } from "react"; import { useTranslation } from "react-i18next"; import { FaRegStickyNote } from "react-icons/fa"; import { UPDATE_JOB } from "../../graphql/jobs.queries"; @@ -9,10 +9,9 @@ import { logImEXEvent } from "../../firebase/firebase.utils"; export default function ProductionListColumnComment({ record, usePortal = false }) { const { t } = useTranslation(); - const [note, setNote] = useState(record.comment || ""); - const [open, setOpen] = useState(false); + const textAreaRef = useRef(null); const [updateAlert] = useMutation(UPDATE_JOB); @@ -39,22 +38,27 @@ export default function ProductionListColumnComment({ record, usePortal = false const handleOpenChange = (flag) => { setOpen(flag); - if (flag) setNote(record.comment || ""); + if (flag) { + setNote(record.comment || ""); + requestAnimationFrame(() => { + try { + textAreaRef.current?.focus?.({ preventScroll: true }); + } catch { + textAreaRef.current?.focus?.(); + } + }); + } }; const content = ( -