feature/IO-3499-React-19 -Checkpoint

client/src/components/chat-popup/chat-popup.component.jsx

@@ -108,9 +108,12 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     hasLoadedConversationsOnceRef.current = true;
 
     getConversations({ variables: { offset: 0 } }).catch((err) => {
-      console.error(`Error fetching conversations: ${err?.message || ""}`, err);
+      // Ignore abort errors (they're expected when component unmounts)
+      if (err?.name !== "AbortError") {
+        console.error(`Error fetching conversations: ${err?.message || ""}`, err);
+      }
     });
-  }, [getConversations]);
+  }, []);
 
   const handleManualRefresh = async () => {
     try {

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -143,7 +143,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                 label={t("jobs.fields.comment")}
                 styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}
               >
-                <ProductionListColumnComment record={job} />
+                <ProductionListColumnComment record={job} usePortal={true} />
               </DataLabel>
               {!isPartsEntry && <DataLabel label={t("jobs.fields.ins_co_nm_short")}>{job.ins_co_nm}</DataLabel>}
               <DataLabel label={t("jobs.fields.clm_no")}>{job.clm_no}</DataLabel>
@@ -176,7 +176,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                     </DataLabel>
                   )}
                   <DataLabel label={t("jobs.fields.production_vars.note")}>
-                    <ProductionListColumnProductionNote record={job} />
+                    <ProductionListColumnProductionNote record={job} usePortal={true} />
                   </DataLabel>
                   <DataLabel label={t("jobs.fields.estimate_sent_approval")}>
                     <Space>

client/src/components/production-list-columns/production-list-columns.comment.component.jsx

@@ -7,7 +7,7 @@ import { FaRegStickyNote } from "react-icons/fa";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 
-export default function ProductionListColumnComment({ record }) {
+export default function ProductionListColumnComment({ record, usePortal = false }) {
   const { t } = useTranslation();
 
   const [note, setNote] = useState(record.comment || "");
@@ -43,16 +43,20 @@ export default function ProductionListColumnComment({ record }) {
   };
 
   const content = (
-    <div style={{ width: "30em" }} onMouseDown={(e) => e.stopPropagation()} onClick={(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
         allowClear
         style={{ marginBottom: "1em" }}
-        onMouseDown={(e) => e.stopPropagation()}
-        onClick={(e) => e.stopPropagation()}
       />
       <div>
         <Button onClick={handleSaveNote} type="primary">
@@ -63,7 +67,15 @@ export default function ProductionListColumnComment({ record }) {
   );
 
   return (
-    <Popover onOpenChange={handleOpenChange} open={open} content={content} trigger="click" fresh>
+    <Popover 
+      onOpenChange={handleOpenChange} 
+      open={open} 
+      content={content} 
+      trigger="click" 
+      destroyOnHidden
+      styles={{ body: { padding: '12px' } }}
+      {...(usePortal ? { getPopupContainer: (trigger) => trigger.parentElement || document.body } : {})}
+    >
       <div
         style={{
           width: "100%",

client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx

@@ -16,7 +16,7 @@ const mapDispatchToProps = (dispatch) => ({
   setNoteUpsertContext: (context) => dispatch(setModalContext({ context: context, modal: "noteUpsert" }))
 });
 
-function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
+function ProductionListColumnProductionNote({ record, setNoteUpsertContext, usePortal = false }) {
   const { t } = useTranslation();
   const [note, setNote] = useState(record.production_vars?.note || "");
   const [open, setOpen] = useState(false);
@@ -59,16 +59,20 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
   );
 
   const content = (
-    <div style={{ width: "30em" }} onMouseDown={(e) => e.stopPropagation()} onClick={(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
         allowClear
         style={{ marginBottom: "1em" }}
-        onMouseDown={(e) => e.stopPropagation()}
-        onClick={(e) => e.stopPropagation()}
       />
       <Space>
         <Button onClick={handleSaveNote} type="primary">
@@ -92,7 +96,15 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
   );
 
   return (
-    <Popover onOpenChange={handleOpenChange} open={open} content={content} trigger="click" fresh>
+    <Popover 
+      onOpenChange={handleOpenChange} 
+      open={open} 
+      content={content} 
+      trigger="click" 
+      destroyOnHidden
+      styles={{ body: { padding: '12px' } }}
+      {...(usePortal ? { getPopupContainer: (trigger) => trigger.parentElement || document.body } : {})}
+    >
       <div
         style={{
           width: "100%",