From 80543f18128e0b5f426d5468ab6593ec12ac0251 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 23 Feb 2021 12:07:45 +0100
Subject: [PATCH] fix(react-formio): Fix issue on Form hook

---
 .../components/form-access/formAccess.component.tsx   | 11 ++++++++---
 .../src/components/form-access/formAccess.stories.tsx | 11 +++++++++--
 .../src/components/form-action/formAction.stories.tsx |  1 +
 .../react-formio/src/components/form/useForm.hook.ts  |  7 ++++++-
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/react-formio/src/components/form-access/formAccess.component.tsx b/packages/react-formio/src/components/form-access/formAccess.component.tsx
index 31ab6bdf..c8325918 100644
--- a/packages/react-formio/src/components/form-access/formAccess.component.tsx
+++ b/packages/react-formio/src/components/form-access/formAccess.component.tsx
@@ -25,6 +25,11 @@ export function FormAccess({
   onSubmit,
   options
 }: PropsWithChildren<FormAccessProps>): ReactElement {
+  const submissionAccess = {
+    data: formAccessToSubmission(form.submissionAccess)
+  };
+  const access = { data: formAccessToSubmission(form.access) };
+
   return (
     <div>
       {children}
@@ -35,7 +40,7 @@ export function FormAccess({
             form={getSubmissionPermissionForm({
               choices: mapRoles(roles)
             })}
-            submission={{ data: formAccessToSubmission(form.submissionAccess) }}
+            submission={submissionAccess}
             onSubmit={(data: any) => {
               onSubmit(mapSubmissionAccess("submissionAccess", form, data));
             }}
@@ -82,11 +87,11 @@ export function FormAccess({
             form={getAccessPermissionForm({
               choices: mapRoles(roles)
             })}
-            submission={{ data: formAccessToSubmission(form.access) }}
+            submission={access}
             onSubmit={(data: any) => {
               onSubmit(mapSubmissionAccess("access", form, data));
             }}
-            options={{ ...{ template: "bootstrap3", iconset: "fa" } }}
+            options={options}
           />
 
           {children}
diff --git a/packages/react-formio/src/components/form-access/formAccess.stories.tsx b/packages/react-formio/src/components/form-access/formAccess.stories.tsx
index 2b9a7baf..c53ea4b7 100644
--- a/packages/react-formio/src/components/form-access/formAccess.stories.tsx
+++ b/packages/react-formio/src/components/form-access/formAccess.stories.tsx
@@ -29,7 +29,9 @@ export default {
 export const Sandbox = (args: any) => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore
-  return <FormAccess {...args} />;
+  return (
+    <FormAccess {...args} options={{ template: "tailwind", iconset: "bx" }} />
+  );
 };
 
 Sandbox.args = {
@@ -48,7 +50,12 @@ Sandbox.args = {
         type: "read_all"
       }
     ],
-    submissionAccess: [],
+    submissionAccess: [
+      {
+        roles: ["5d0797bc872fc747da559858"],
+        type: "read_all"
+      }
+    ],
     controller: "",
     properties: {},
     settings: {},
diff --git a/packages/react-formio/src/components/form-action/formAction.stories.tsx b/packages/react-formio/src/components/form-action/formAction.stories.tsx
index 7a8cafca..198f7fe1 100644
--- a/packages/react-formio/src/components/form-action/formAction.stories.tsx
+++ b/packages/react-formio/src/components/form-action/formAction.stories.tsx
@@ -6,6 +6,7 @@ export default {
   component: FormAction,
   argTypes: {
     onSubmit: { action: "onSubmit" },
+
     type: {
       control: {
         type: "object"
diff --git a/packages/react-formio/src/components/form/useForm.hook.ts b/packages/react-formio/src/components/form/useForm.hook.ts
index 85ef8f1f..5d3caab7 100644
--- a/packages/react-formio/src/components/form/useForm.hook.ts
+++ b/packages/react-formio/src/components/form/useForm.hook.ts
@@ -35,7 +35,8 @@ export const useForm = ({
   const initializeFormio = (): void => {
     if (instance.current && instance.current.ready) {
       instance.current.onAny(onAnyEvent);
-      if (submission) {
+
+      if (formio.current && submission) {
         formio.current.submission = submission;
       }
     }
@@ -58,6 +59,10 @@ export const useForm = ({
       onFormReady(formioInstance);
     }
 
+    if (submission) {
+      formio.current.submission = submission;
+    }
+
     return formio.current;
   };