diff --git a/web/src/components/input/NameAndIdFields.tsx b/web/src/components/input/NameAndIdFields.tsx index c78a2917b1..a3bbf56fed 100644 --- a/web/src/components/input/NameAndIdFields.tsx +++ b/web/src/components/input/NameAndIdFields.tsx @@ -26,6 +26,7 @@ type NameAndIdFieldsProps = { placeholderName?: string; placeholderId?: string; idVisible?: boolean; + idDisabled?: boolean; }; export default function NameAndIdFields({ @@ -41,6 +42,7 @@ export default function NameAndIdFields({ placeholderName, placeholderId, idVisible, + idDisabled, }: NameAndIdFieldsProps) { const { t } = useTranslation(["common"]); const { watch, setValue, trigger, formState } = useFormContext(); @@ -59,6 +61,9 @@ export default function NameAndIdFields({ const effectiveProcessId = processId || defaultProcessId; useEffect(() => { + if (idDisabled) { + return; + } const subscription = watch((value, { name }) => { if (name === nameField) { hasUserTypedRef.current = true; @@ -68,7 +73,15 @@ export default function NameAndIdFields({ } }); return () => subscription.unsubscribe(); - }, [watch, setValue, trigger, nameField, idField, effectiveProcessId]); + }, [ + watch, + setValue, + trigger, + nameField, + idField, + effectiveProcessId, + idDisabled, + ]); // Auto-expand if there's an error on the ID field after user has typed useEffect(() => { @@ -123,6 +136,7 @@ export default function NameAndIdFields({