From 6d754acfcd04f41569db82e6556a099ab6bc8916 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Mon, 18 Mar 2024 19:59:39 +0800
Subject: [PATCH] fix: disable edit signer inputs (#1035)

## Description

Update the add signer form to disable the signers when required.

I assume the actual issue is that `{...field}` was spreading a disabled
prop which was overriding our one.

## Changes Made

- Use fieldset to disable inputs
- Manually disable select since fieldset doesn't work for that select
for some reason
---
 packages/ui/primitives/document-flow/add-signers.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/ui/primitives/document-flow/add-signers.tsx b/packages/ui/primitives/document-flow/add-signers.tsx
index b13e220f3..8792af2a8 100644
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@@ -151,9 +151,10 @@ export const AddSignersFormPartial = ({
 
           <AnimatePresence>
             {signers.map((signer, index) => (
-              <motion.div
+              <motion.fieldset
                 key={signer.id}
                 data-native-id={signer.nativeId}
+                disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
                 className="flex flex-wrap items-end gap-x-4"
               >
                 <div className="flex-1">
@@ -202,7 +203,11 @@ export const AddSignersFormPartial = ({
                     control={control}
                     name={`signers.${index}.role`}
                     render={({ field: { value, onChange } }) => (
-                      <Select value={value} onValueChange={(x) => onChange(x)}>
+                      <Select
+                        value={value}
+                        onValueChange={(x) => onChange(x)}
+                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
+                      >
                         <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
 
                         <SelectContent className="" align="end">
@@ -258,7 +263,7 @@ export const AddSignersFormPartial = ({
                   <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.email} />
                   <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.name} />
                 </div>
-              </motion.div>
+              </motion.fieldset>
             ))}
           </AnimatePresence>
         </div>