From b2936e5fcf8623b7be03242621d533071da7843c Mon Sep 17 00:00:00 2001 From: Oliver Walters Date: Sat, 27 Jun 2026 08:32:03 +0000 Subject: [PATCH] Adjust order of operations for hooks --- src/frontend/src/forms/StockForms.tsx | 78 ++++++++++++++++++--------- 1 file changed, 53 insertions(+), 25 deletions(-) diff --git a/src/frontend/src/forms/StockForms.tsx b/src/frontend/src/forms/StockForms.tsx index 08196f2737..7f518e50c8 100644 --- a/src/frontend/src/forms/StockForms.tsx +++ b/src/frontend/src/forms/StockForms.tsx @@ -42,6 +42,7 @@ import { useCallback, useEffect, useMemo, + useRef, useState } from 'react'; import { useFormContext } from 'react-hook-form'; @@ -661,34 +662,61 @@ function StockOperationsRow({ const callChangeFn = useCallback( (identifier: number | string, key: string, value: any) => { - props.changeFn(identifier, key, value); + queueMicrotask(() => { + props.changeFn(identifier, key, value); + }); }, [props.changeFn] ); - const [packagingOpen, packagingHandlers] = useDisclosure(false, { - onOpen: () => { - if (transfer) { - callChangeFn(rowId, 'packaging', record?.packaging || undefined); - } - }, - onClose: () => { - if (transfer) { - callChangeFn(rowId, 'packaging', undefined); - } - } - }); + const [packagingOpen, packagingHandlers] = useDisclosure(false); + const [statusOpen, statusHandlers] = useDisclosure(false); + const hasMountedPackagingRef = useRef(false); + const hasMountedStatusRef = useRef(false); - const [statusOpen, statusHandlers] = useDisclosure(false, { - onOpen: () => { - setStatus(record?.status_custom_key || record?.status || undefined); - props.changeFn(rowId, 'status', record?.status || undefined); - }, - onClose: () => { - setStatus(undefined); - callChangeFn(rowId, 'status', undefined); + useEffect(() => { + if (!transfer) { + return; } - }); + + if (!hasMountedPackagingRef.current) { + hasMountedPackagingRef.current = true; + return; + } + + callChangeFn( + rowId, + 'packaging', + packagingOpen ? record?.packaging || undefined : undefined + ); + }, [transfer, packagingOpen, rowId, record?.packaging, callChangeFn]); + + useEffect(() => { + if (!changeStatus) { + return; + } + + if (!hasMountedStatusRef.current) { + hasMountedStatusRef.current = true; + return; + } + + if (statusOpen) { + setStatus(record?.status_custom_key || record?.status || undefined); + callChangeFn(rowId, 'status', record?.status || undefined); + return; + } + + setStatus(undefined); + callChangeFn(rowId, 'status', undefined); + }, [ + changeStatus, + statusOpen, + rowId, + record?.status, + record?.status_custom_key, + callChangeFn + ]); const stockString: string = useMemo(() => { if (!record) { @@ -747,7 +775,7 @@ function StockOperationsRow({ value: quantity, onValueChange: (value: any) => { setQuantity(value); - props.changeFn(rowId, 'quantity', value); + callChangeFn(rowId, 'quantity', value); } }} error={props.rowErrors?.quantity?.message} @@ -814,7 +842,7 @@ function StockOperationsRow({ visible={statusOpen} onValueChange={(value: any) => { setStatus(value); - props.changeFn(rowId, 'status', value || undefined); + callChangeFn(rowId, 'status', value || undefined); }} fieldName='status' fieldDefinition={{ @@ -830,7 +858,7 @@ function StockOperationsRow({ { - props.changeFn(rowId, 'packaging', value || undefined); + callChangeFn(rowId, 'packaging', value || undefined); }} fieldName='packaging' fieldDefinition={{