fix: improve checkbox field rendering and interaction

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -52,12 +52,19 @@ export const DocumentSigningCheckboxField = ({
     value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
   }));
 
+  const parsedCheckedValues = useMemo(
+    () => fromCheckboxValue(field.customText),
+    [field.customText],
+  );
+
   const [checkedValues, setCheckedValues] = useState(
-    values
-      ?.map((item) =>
-        item.checked ? (item.value.length > 0 ? item.value : `empty-value-${item.id}`) : '',
-      )
-      .filter(Boolean) || [],
+    field.inserted && parsedCheckedValues.length > 0
+      ? parsedCheckedValues
+      : values
+          ?.map((item) =>
+            item.checked ? (item.value.length > 0 ? item.value : `empty-value-${item.id}`) : '',
+          )
+          .filter(Boolean) || [],
   );
 
   const isReadOnly = parsedFieldMeta.readOnly;
@@ -172,19 +179,13 @@ export const DocumentSigningCheckboxField = ({
     let updatedValues: string[] = [];
 
     try {
-      const isChecked = checkedValues.includes(
-        item.value.length > 0 ? item.value : `empty-value-${item.id}`,
-      );
+      const itemValue = item.value.length > 0 ? item.value : `empty-value-${item.id}`;
+      const isChecked = checkedValues.includes(itemValue);
 
       if (!isChecked) {
-        updatedValues = [
-          ...checkedValues,
-          item.value.length > 0 ? item.value : `empty-value-${item.id}`,
-        ];
+        updatedValues = [...checkedValues, itemValue];
       } else {
-        updatedValues = checkedValues.filter(
-          (v) => v !== item.value && v !== `empty-value-${item.id}`,
-        );
+        updatedValues = checkedValues.filter((v) => v !== itemValue);
       }
 
       setCheckedValues(updatedValues);
@@ -215,6 +216,12 @@ export const DocumentSigningCheckboxField = ({
     }
   };
 
+  useEffect(() => {
+    if (field.inserted && parsedCheckedValues.length > 0) {
+      setCheckedValues(parsedCheckedValues);
+    }
+  }, [field.inserted, parsedCheckedValues]);
+
   useEffect(() => {
     if (shouldAutoSignField) {
       void executeActionAuthProcedure({
@@ -224,11 +231,6 @@ export const DocumentSigningCheckboxField = ({
     }
   }, [checkedValues, isLengthConditionMet, field.inserted]);
 
-  const parsedCheckedValues = useMemo(
-    () => fromCheckboxValue(field.customText),
-    [field.customText],
-  );
-
   return (
     <DocumentSigningFieldContainer
       field={field}
@@ -252,16 +254,17 @@ export const DocumentSigningCheckboxField = ({
           <div className="z-50 flex flex-col gap-y-2">
             {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
               const itemValue = item.value || `empty-value-${item.id}`;
+              const checkboxId = `checkbox-field-${field.id}-${index}`;
 
               return (
                 <div key={index} className="flex items-center gap-x-1.5">
                   <Checkbox
                     className="h-4 w-4"
-                    id={`checkbox-${index}`}
+                    id={checkboxId}
                     checked={checkedValues.includes(itemValue)}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                   />
-                  <Label htmlFor={`checkbox-${index}`}>
+                  <Label htmlFor={checkboxId}>
                     {item.value.includes('empty-value-') ? '' : item.value}
                   </Label>
                 </div>
@@ -272,20 +275,21 @@ export const DocumentSigningCheckboxField = ({
       )}
 
       {field.inserted && (
-        <div className="flex flex-col gap-y-1">
+        <div className="flex flex-col gap-y-2">
           {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
             const itemValue = item.value || `empty-value-${item.id}`;
+            const checkboxId = `checkbox-field-${field.id}-${index}-inserted`;
 
             return (
               <div key={index} className="flex items-center gap-x-1.5">
                 <Checkbox
-                  className="h-3 w-3"
-                  id={`checkbox-${index}`}
-                  checked={parsedCheckedValues.includes(itemValue)}
+                  className="h-4 w-4"
+                  id={checkboxId}
+                  checked={checkedValues.includes(itemValue)}
                   disabled={isLoading}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />
-                <Label htmlFor={`checkbox-${index}`} className="text-xs">
+                <Label htmlFor={checkboxId}>
                   {item.value.includes('empty-value-') ? '' : item.value}
                 </Label>
               </div>

packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx

@@ -1,5 +1,5 @@
-import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
 import type { TCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
+import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import { Label } from '@documenso/ui/primitives/label';
 
@@ -28,18 +28,22 @@ export const CheckboxField = ({ field }: CheckboxFieldProps) => {
       {!parsedFieldMeta?.values ? (
         <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />
       ) : (
-        parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => (
-          <div key={index} className="flex items-center gap-x-1.5">
-            <Checkbox
-              className="dark:border-field-border h-3 w-3 bg-white"
-              id={`checkbox-${index}`}
-              checked={item.checked}
-            />
-            <Label htmlFor={`checkbox-${index}`} className="text-xs font-normal text-black">
-              {item.value}
-            </Label>
-          </div>
-        ))
+        parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => {
+          const checkboxId = `checkbox-field-${field.formId}-${index}`;
+
+          return (
+            <div key={index} className="flex items-center gap-x-1.5">
+              <Checkbox
+                className="dark:border-field-border h-3 w-3 bg-white"
+                id={checkboxId}
+                checked={item.checked}
+              />
+              <Label htmlFor={checkboxId} className="text-xs font-normal text-black">
+                {item.value}
+              </Label>
+            </div>
+          );
+        })
       )}
     </div>
   );

packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx

@@ -205,6 +205,7 @@ export const CheckboxFieldAdvancedSettings = ({
             <div key={index} className="mt-2 flex items-center gap-4">
               <Checkbox
                 className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
+                id={`checkbox-${value.id}-${index}`}
                 checked={value.checked}
                 onCheckedChange={(checked) => handleCheckboxValue(index, 'checked', checked)}
               />