From a873a2573ac82ea560e89624db1458850c8b9256 Mon Sep 17 00:00:00 2001
From: Allan Carr <allan@imexsystems.ca>
Date: Fri, 6 Mar 2026 15:32:06 -0800
Subject: [PATCH 1/2] IO-3603 Production Board Note Autofocus

Signed-off-by: Allan Carr <allan@imexsystems.ca>
---
 ...duction-list-columns.comment.component.jsx | 36 ++++++++++---------
 ...-list-columns.productionnote.component.jsx | 34 ++++++++++--------
 2 files changed, 40 insertions(+), 30 deletions(-)

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 = (
-    <div 
-      style={{ width: "30em" }} 
-      onClick={(e) => e.stopPropagation()}
-      onPointerDown={(e) => e.stopPropagation()}
-    >
+    <div style={{ width: "30em" }} onClick={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
       <Input.TextArea
         id={`job-comment-${record.id}`}
         name="comment"
         rows={5}
         value={note}
         onChange={handleChange}
-        autoFocus
+        ref={textAreaRef}
         allowClear
         style={{ marginBottom: "1em" }}
       />
@@ -67,13 +71,13 @@ export default function ProductionListColumnComment({ record, usePortal = false
   );
 
   return (
-    <Popover 
-      onOpenChange={handleOpenChange} 
-      open={open} 
-      content={content} 
-      trigger="click" 
+    <Popover
+      onOpenChange={handleOpenChange}
+      open={open}
+      content={content}
+      trigger="click"
       destroyOnHidden
-      styles={{ body: { padding: '12px' } }}
+      styles={{ body: { padding: "12px" } }}
       {...(usePortal ? { getPopupContainer: (trigger) => trigger.parentElement || document.body } : {})}
     >
       <div
diff --git a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
index c1e92dfd8..ea85f3dcc 100644
--- a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
@@ -1,7 +1,7 @@
 import Icon from "@ant-design/icons";
 import { useMutation } from "@apollo/client/react";
 import { Button, Input, Popover, Space } from "antd";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaRegStickyNote } from "react-icons/fa";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -20,6 +20,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP
   const { t } = useTranslation();
   const [note, setNote] = useState(record.production_vars?.note || "");
   const [open, setOpen] = useState(false);
+  const textAreaRef = useRef(null);
 
   const [updateAlert] = useMutation(UPDATE_JOB);
 
@@ -53,24 +54,29 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP
   const handleOpenChange = useCallback(
     (flag) => {
       setOpen(flag);
-      if (flag) setNote(record.production_vars?.note || "");
+      if (flag) {
+        setNote(record.production_vars?.note || "");
+        requestAnimationFrame(() => {
+          try {
+            textAreaRef.current?.focus?.({ preventScroll: true });
+          } catch {
+            textAreaRef.current?.focus?.();
+          }
+        });
+      }
     },
     [record]
   );
 
   const content = (
-    <div 
-      style={{ width: "30em" }} 
-      onClick={(e) => e.stopPropagation()}
-      onPointerDown={(e) => e.stopPropagation()}
-    >
+    <div style={{ width: "30em" }} onClick={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
       <Input.TextArea
         id={`job-production-note-${record.id}`}
         name="production_note"
         rows={5}
         value={note}
         onChange={handleChange}
-        autoFocus
+        ref={textAreaRef}
         allowClear
         style={{ marginBottom: "1em" }}
       />
@@ -96,13 +102,13 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP
   );
 
   return (
-    <Popover 
-      onOpenChange={handleOpenChange} 
-      open={open} 
-      content={content} 
-      trigger="click" 
+    <Popover
+      onOpenChange={handleOpenChange}
+      open={open}
+      content={content}
+      trigger="click"
       destroyOnHidden
-      styles={{ body: { padding: '12px' } }}
+      styles={{ body: { padding: "12px" } }}
       {...(usePortal ? { getPopupContainer: (trigger) => trigger.parentElement || document.body } : {})}
     >
       <div

From 8d00fc29d10eda670a1532915813741a91c3fb4d Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Mon, 9 Mar 2026 12:59:00 -0400
Subject: [PATCH 2/2] feature/IO-3603-Production-Board-Note-Autofocus - Fix

---
 ...oduction-list-columns.comment.component.jsx | 18 +++++++++++++-----
 ...n-list-columns.productionnote.component.jsx | 18 +++++++++++++-----
 2 files changed, 26 insertions(+), 10 deletions(-)

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 43d27c40a..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
@@ -12,6 +12,7 @@ export default function ProductionListColumnComment({ record, usePortal = false
   const [note, setNote] = useState(record.comment || "");
   const [open, setOpen] = useState(false);
   const textAreaRef = useRef(null);
+  const rafIdRef = useRef(null);
 
   const [updateAlert] = useMutation(UPDATE_JOB);
 
@@ -37,14 +38,21 @@ 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 || "");
-      requestAnimationFrame(() => {
-        try {
-          textAreaRef.current?.focus?.({ preventScroll: true });
-        } catch {
-          textAreaRef.current?.focus?.();
+      rafIdRef.current = requestAnimationFrame(() => {
+        rafIdRef.current = null;
+        if (textAreaRef.current?.focus) {
+          try {
+            textAreaRef.current.focus({ preventScroll: true });
+          } catch {
+            textAreaRef.current.focus();
+          }
         }
       });
     }
diff --git a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
index ea85f3dcc..21d129adc 100644
--- a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
@@ -21,6 +21,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP
   const [note, setNote] = useState(record.production_vars?.note || "");
   const [open, setOpen] = useState(false);
   const textAreaRef = useRef(null);
+  const rafIdRef = useRef(null);
 
   const [updateAlert] = useMutation(UPDATE_JOB);
 
@@ -53,14 +54,21 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP
 
   const handleOpenChange = useCallback(
     (flag) => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
       setOpen(flag);
       if (flag) {
         setNote(record.production_vars?.note || "");
-        requestAnimationFrame(() => {
-          try {
-            textAreaRef.current?.focus?.({ preventScroll: true });
-          } catch {
-            textAreaRef.current?.focus?.();
+        rafIdRef.current = requestAnimationFrame(() => {
+          rafIdRef.current = null;
+          if (textAreaRef.current?.focus) {
+            try {
+              textAreaRef.current.focus({ preventScroll: true });
+            } catch {
+              textAreaRef.current.focus();
+            }
           }
         });
       }