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..10d084cb7 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,10 @@ 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 rafIdRef = useRef(null); const [updateAlert] = useMutation(UPDATE_JOB); @@ -38,23 +38,35 @@ export default function ProductionListColumnComment({ record, usePortal = false }; const handleOpenChange = (flag) => { + if (rafIdRef.current) { + cancelAnimationFrame(rafIdRef.current); + rafIdRef.current = null; + } setOpen(flag); - if (flag) setNote(record.comment || ""); + if (flag) { + setNote(record.comment || ""); + rafIdRef.current = requestAnimationFrame(() => { + rafIdRef.current = null; + if (textAreaRef.current?.focus) { + try { + textAreaRef.current.focus({ preventScroll: true }); + } catch { + textAreaRef.current.focus(); + } + } + }); + } }; const content = ( -
e.stopPropagation()} - onPointerDown={(e) => e.stopPropagation()} - > +
e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}> @@ -67,13 +79,13 @@ export default function ProductionListColumnComment({ record, usePortal = false ); return ( - trigger.parentElement || document.body } : {})} >
{ + if (rafIdRef.current) { + cancelAnimationFrame(rafIdRef.current); + rafIdRef.current = null; + } setOpen(flag); - if (flag) setNote(record.production_vars?.note || ""); + if (flag) { + setNote(record.production_vars?.note || ""); + rafIdRef.current = requestAnimationFrame(() => { + rafIdRef.current = null; + if (textAreaRef.current?.focus) { + try { + textAreaRef.current.focus({ preventScroll: true }); + } catch { + textAreaRef.current.focus(); + } + } + }); + } }, [record] ); const content = ( -
e.stopPropagation()} - onPointerDown={(e) => e.stopPropagation()} - > +
e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}> @@ -96,13 +110,13 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP ); return ( - trigger.parentElement || document.body } : {})} >