feature/IO-3499-React-19: Production Note + Comment edit in job details header / card

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

@@ -18,6 +18,7 @@ export default function ProductionListColumnComment({ record }) {
 
   const handleSaveNote = (e) => {
     e.stopPropagation();
+    e.preventDefault();
     setOpen(false);
     updateAlert({
       variables: {
@@ -33,7 +34,6 @@ export default function ProductionListColumnComment({ record }) {
   };
 
   const handleChange = (e) => {
-    e.stopPropagation();
     setNote(e.target.value);
   };
 
@@ -42,26 +42,38 @@ export default function ProductionListColumnComment({ record }) {
     if (flag) setNote(record.comment || "");
   };
 
-  return (
+  const content = (
-    <Popover
+    <div 
-      onOpenChange={handleOpenChange}
+      style={{ width: "30em" }} 
-      open={open}
+      onMouseDown={(e) => e.stopPropagation()}
-      content={
+      onClick={(e) => e.stopPropagation()}
-        <div style={{ width: "30em" }}>
+    >
       <Input.TextArea
         rows={5}
         value={note}
         onChange={handleChange}
-            // onPressEnter={handleSaveNote}
         autoFocus
         allowClear
+        style={{ marginBottom: "1em" }}
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
       />
       <div>
-            <Button onClick={handleSaveNote}>{t("general.actions.save")}</Button>
+        <Button onClick={handleSaveNote} type="primary">
+          {t("general.actions.save")}
+        </Button>
       </div>
     </div>
-      }
+  );
-      trigger={["click"]}
+
+  return (
+    <Popover 
+      onOpenChange={handleOpenChange} 
+      open={open} 
+      content={content} 
+      trigger="click" 
+      fresh
+      getPopupContainer={(trigger) => trigger.parentElement}
     >
       <div
         style={{
@@ -69,9 +81,9 @@ export default function ProductionListColumnComment({ record }) {
           height: "19px",
           cursor: "pointer",
           overflow: "hidden",
-          textOverflow: "ellipsis",
+          textOverflow: "ellipsis"
-          display: "inline-block"
         }}
+        onClick={(e) => e.stopPropagation()}
       >
         <Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
         <Tooltip title={record.comment}>{record.comment || " "}</Tooltip>

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, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaRegStickyNote } from "react-icons/fa";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -27,6 +27,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
     (e) => {
       logImEXEvent("production_add_note");
       e.stopPropagation();
+      e.preventDefault();
       setOpen(false);
       updateAlert({
         variables: {
@@ -46,7 +47,6 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
   );
 
   const handleChange = useCallback((e) => {
-    e.stopPropagation();
     setNote(e.target.value);
   }, []);
 
@@ -58,9 +58,8 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
     [record]
   );
 
-  const popoverContent = useMemo(
+  const content = (
-    () => (
+    <div style={{ width: "30em" }} onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
-      <div style={{ width: "30em" }}>
       <Input.TextArea
         rows={5}
         value={note}
@@ -68,6 +67,8 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
         autoFocus
         allowClear
         style={{ marginBottom: "1em" }}
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
       />
       <Space>
         <Button onClick={handleSaveNote} type="primary">
@@ -88,12 +89,17 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
         </Button>
       </Space>
     </div>
-    ),
-    [note, handleSaveNote, handleChange, record, setNoteUpsertContext, t]
   );
 
   return (
-    <Popover onOpenChange={handleOpenChange} open={open} content={popoverContent} trigger={["click"]}>
+    <Popover
+      onOpenChange={handleOpenChange}
+      open={open}
+      content={content}
+      trigger="click"
+      fresh
+      getPopupContainer={(trigger) => trigger.parentElement}
+    >
       <div
         style={{
           width: "100%",
@@ -102,6 +108,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
           overflow: "hidden",
           textOverflow: "ellipsis"
         }}
+        onClick={(e) => e.stopPropagation()}
       >
         <Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
         {record.production_vars?.note || " "}