task-data-in-loop-fix (#1748)

* pass the task guid in the id so base input gets re-rendered fully w/ burnettk

* use keys instead of ids w/ burnettk

* lint issues

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/components/CustomForm.tsx

@@ -19,10 +19,12 @@ enum DateCheckType {
 
 type OwnProps = {
   id: string;
+  key: string;
   formData: any;
   schema: any;
   uiSchema: any;
 
+  className?: string;
   disabled?: boolean;
   onChange?: any;
   onSubmit?: any;
@@ -35,7 +37,9 @@ type OwnProps = {
 
 export default function CustomForm({
   id,
+  key,
   formData,
+  className,
   schema,
   uiSchema,
   disabled = false,
@@ -504,6 +508,8 @@ export default function CustomForm({
 
   const formProps = {
     id,
+    key,
+    className,
     disabled,
     formData,
     onChange,

spiffworkflow-frontend/src/components/ReactFormBuilder/ReactFormBuilder.tsx

@@ -520,6 +520,7 @@ export default function ReactFormBuilder({
         <ErrorBoundary FallbackComponent={FormErrorFallback}>
           <CustomForm
             id="custom_form"
+            key="custom_form"
             formData={formData}
             onChange={(e: any) => updateData(e.formData)}
             schema={postJsonSchema}

spiffworkflow-frontend/src/components/TaskListTable.tsx

@@ -187,6 +187,7 @@ export default function TaskListTable({
           </div>
           <CustomForm
             id={formSubmissionTask.guid}
+            key={formSubmissionTask.guid}
             formData={formSubmissionTask.data}
             schema={jsonSchema}
             uiSchema={formUiSchema}

spiffworkflow-frontend/src/components/messages/MessageEditor.tsx

@@ -267,6 +267,7 @@ export function MessageEditor({
         ) : null}
         <CustomForm
           id={currentMessageId || ''}
+          key={currentMessageId || ''}
           schema={schema}
           uiSchema={uischema}
           formData={currentFormData}

spiffworkflow-frontend/src/index.css

@@ -830,7 +830,7 @@ hr {
   margin-left: 1rem;
 }
 
-#hidden-form-for-autosave {
+.hidden-form-for-autosave {
   display: none;
 }
 

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -399,7 +399,8 @@ export default function TaskShow() {
       <Grid fullWidth condensed className="megacondensed">
         <Column sm={4} md={5} lg={8}>
           <CustomForm
-            id="form-to-submit"
+            id={`form-to-submit-${taskWithTaskData.guid}`}
+            key={`form-to-submit-${taskWithTaskData.guid}`}
             disabled={formButtonsDisabled}
             formData={taskData}
             onChange={(obj: any) => {
@@ -414,7 +415,9 @@ export default function TaskShow() {
             {reactFragmentToHideSubmitButton}
           </CustomForm>
           <CustomForm
-            id="hidden-form-for-autosave"
+            id={`hidden-form-for-autosave-${taskWithTaskData.guid}`}
+            key={`hidden-form-for-autosave-${taskWithTaskData.guid}`}
+            className="hidden-form-for-autosave"
             formData={taskData}
             onSubmit={handleAutosaveFormSubmit}
             schema={jsonSchema}

spiffworkflow-frontend/src/routes/public/PublicForm.tsx

@@ -154,7 +154,8 @@ export default function PublicForm() {
           <Grid fullWidth condensed className="megacondensed">
             <Column sm={4} md={5} lg={8}>
               <CustomForm
-                id="form-to-submit"
+                id={`form-to-submit-${publicTask.task_guid}`}
+                key={`form-to-submit-${publicTask.task_guid}`}
                 disabled={formButtonsDisabled}
                 formData={taskData}
                 onChange={(obj: any) => {