admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-3603 Production Board Note Autofocus

Browse Source 
Signed-off-by: Allan Carr <allan@imexsystems.ca>
This commit is contained in:
Allan Carr
2026-03-06 15:32:06 -08:00
parent 8980d3716b
commit a873a2573a
2 changed files with 40 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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" }}
/>
@@ -73,7 +77,7 @@ export default function ProductionListColumnComment({ record, usePortal = false
content={content}
trigger="click"
destroyOnHidden
styles={{ body: { padding: '12px' } }}
styles={{ body: { padding: "12px" } }}
{...(usePortal ? { getPopupContainer: (trigger) => trigger.parentElement || document.body } : {})}
>
<div

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

@@ -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" }}
/>
@@ -102,7 +108,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP
content={content}
trigger="click"
destroyOnHidden
styles={{ body: { padding: '12px' } }}
styles={{ body: { padding: "12px" } }}
{...(usePortal ? { getPopupContainer: (trigger) => trigger.parentElement || document.body } : {})}
>
<div