fix(react-formio): Fix multiple triggered event on Form component

packages/react-formio-container/src/hooks/useForm.hook.ts

@@ -11,7 +11,8 @@ import {
   selectAuth,
   selectError,
   selectForm,
-  selectRoot
+  selectRoot,
+  oneOfIsActive
 } from "@tsed/react-formio";
 import { push } from "connected-react-router";
 import noop from "lodash/noop";
@@ -52,6 +53,7 @@ export function useForm(props: UseFormProps) {
   const auth: AuthState = useSelector(selectAuth);
   const error = useSelector((state) => selectError(type, state));
   const form = useSelector((state) => selectForm(type, state));
+  const isActive = useSelector(oneOfIsActive(type));
 
   if (form && (!form.tags || !form.tags.length) && formAction === "create") {
     form.tags = [...(parameters?.query?.tags || [])];
@@ -183,6 +185,7 @@ export function useForm(props: UseFormProps) {
 
   return {
     ...props,
+    isActive,
     basePath,
     formId,
     formAction,

packages/react-formio-container/src/hooks/useSubmission.hook.tsx

@@ -2,16 +2,17 @@ import {
   deleteSubmission,
   getSubmission as getSubmissionAction,
   getSubmissions,
+  oneOfIsActive,
   receiveForm,
   refreshSubmissions,
   saveSubmission as saveSubmissionAction,
   selectAuth,
   selectError,
   selectForm,
+  selectIsActive,
   selectRoot,
   selectSubmission,
-  Submission,
-  selectIsActive
+  Submission
 } from "@tsed/react-formio";
 import { push } from "connected-react-router";
 import noop from "lodash/noop";
@@ -52,7 +53,9 @@ export function useSubmission(props: UseSubmissionProps) {
     selectSubmission(submissionType, state as any)
   );
 
-  const isActive = useSelector((state) => selectIsActive(type, state));
+  const isActive = useSelector(oneOfIsActive(submissionType, formType, type));
+
+  useSelector((state) => selectIsActive(submissionType, state));
 
   const url = useSelector(
     (state) =>

packages/react-formio-container/src/views/form.view.tsx

@@ -1,4 +1,4 @@
-import { Alert, Tabs, RemoveModal } from "@tsed/react-formio";
+import { Alert, Tabs, RemoveModal, Loader } from "@tsed/react-formio";
 import React from "react";
 import { Route, Switch, useParams } from "react-router";
 import { FormEditView } from "./formEdit.view";
@@ -16,10 +16,12 @@ function FormComponent({ className, ...props }: ReturnType<typeof useForm>) {
     setCurrentRoute,
     routes,
     gotoEdit,
-    i18n
+    i18n,
+    isActive
   } = props;
 
   const RemoveModalComponent = props.RemoveModalComponent || RemoveModal;
+  const LoaderComponent = props.LoaderComponent || Loader;
 
   return (
     <div>
@@ -78,6 +80,7 @@ function FormComponent({ className, ...props }: ReturnType<typeof useForm>) {
               />
             </Route>
           </Switch>
+          <LoaderComponent isActive={isActive} />
         </Tabs>
       </div>
     </div>

packages/react-formio-container/src/views/formSettings.view.tsx

@@ -7,7 +7,7 @@ export function FormSettingsView(props: ReturnType<typeof useForm>) {
   const { form, saveForm, i18n } = props;
 
   return (
-    <div className={"p-3 pb-1"}>
+    <div className={"p-3"}>
       <Component
         {...props}
         form={form}

packages/react-formio-container/src/views/submission.view.tsx

@@ -50,7 +50,6 @@ export function SubmissionComponent(props: ReturnType<typeof useSubmission>) {
 
   return (
     <div className={"p-4 relative"}>
-      <LoaderComponent isActive={isActive} />
       <h2
         className={
           "border-b-1 border-gray-300 text-lg mb-4 pb-1 flex items-center"
@@ -104,6 +103,8 @@ export function SubmissionComponent(props: ReturnType<typeof useSubmission>) {
           onClose={gotoEdit}
         />
       )}
+
+      <LoaderComponent isActive={isActive} />
     </div>
   );
 }

packages/react-formio/src/components/form-access/formAccess.component.tsx

@@ -3,17 +3,19 @@ import React, {
   PropsWithChildren,
   ReactElement,
   useCallback,
+  useEffect,
   useMemo,
   useState
 } from "react";
 import { FormOptions, FormSchema, Submission } from "../../interfaces";
 import { Card } from "../card/card.component";
-import { Form } from "../form/form.component";
+import { ChangedSubmission, Form } from "../form/form.component";
 import {
   AccessRoles,
   dataAccessToSubmissions,
   FormAccessSchema,
   getFormAccess,
+  shouldUpdate,
   SubmissionAccess,
   submissionsToDataAccess,
   updateSubmissions
@@ -46,6 +48,18 @@ function useFormAccess({
     [submissions]
   );
 
+  useEffect(() => {
+    const input = dataAccessToSubmissions(formDefinition, form);
+    if (formDefinition?._id) {
+      if (
+        shouldUpdate("access", submissions.access, input) ||
+        shouldUpdate("submissionAccess", submissions.submissionAccess, input)
+      ) {
+        setSubmissions(input);
+      }
+    }
+  }, [formDefinition?._id]);
+
   return {
     options,
     form,
@@ -80,18 +94,26 @@ function NamedFormAccess({
   onSubmit,
   children
 }: PropsWithChildren<NamedFormAccessProps>) {
+  const [isValid, setIsValid] = useState(true);
+
   return (
     <>
       <Form
+        name={name}
         form={form[name]}
         submission={submissions[name]}
-        onChange={(submission: Submission<AccessRoles>) => {
-          onChange(name, submission);
+        onChange={({ data, isValid }: ChangedSubmission<AccessRoles>) => {
+          isValid && onChange(name, { data });
+          setIsValid(isValid);
         }}
         options={options}
       />
 
-      <button className={"mt-5 btn btn-primary"} onClick={onSubmit}>
+      <button
+        disabled={!isValid}
+        className={"mt-5 btn btn-primary"}
+        onClick={onSubmit}
+      >
         Save access
       </button>
 

packages/react-formio/src/components/form-builder/formBuilder.component.tsx

@@ -40,7 +40,7 @@ async function createBuilder(
   };
 
   try {
-    const builder = await new FormioFormBuilder(el, form, options).ready;
+    const builder = await new FormioFormBuilder(el, form, { ...options }).ready;
 
     const handleEvent = (event: string) => {
       return (...args: any[]) => {

packages/react-formio/src/components/form-settings/formSettings.component.spec.tsx

@@ -12,7 +12,13 @@ describe("FormSettings", () => {
     Sandbox.args.form.action = "https://test";
 
     const { getByTestId } = render(
-      <Sandbox {...Sandbox.args} onSubmit={onSubmit} />
+      <Sandbox
+        {...Sandbox.args}
+        onSubmit={onSubmit}
+        options={{
+          i18n: (f: string) => f + " i18N"
+        }}
+      />
     );
 
     const btn = getByTestId("submit");
@@ -52,8 +58,6 @@ describe("FormSettings", () => {
       <FormSettings
         {...Sandbox.args}
         options={{
-          template: "tailwind",
-          iconset: "bx",
           i18n: (f: string) => f + " i18N"
         }}
       />

packages/react-formio/src/components/form-settings/formSettings.component.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useState } from "react";
-import { FormOptions, FormSchema, Submission } from "../../interfaces";
+import React, { useCallback, useEffect, useState } from "react";
+import { FormOptions, FormSchema } from "../../interfaces";
 import { getFormSettingsSchema } from "./formSettings.schema";
-import { Form } from "../form/form.component";
+import { ChangedSubmission, Form } from "../form/form.component";
 import {
-  formSettingsToSubmission,
   FormSettingsSchema,
+  formSettingsToSubmission,
   submissionToFormSettings
 } from "./formSettings.utils";
 import isEqual from "lodash/isEqual";
@@ -22,25 +22,36 @@ function useFormSettings({
   options
 }: FormSettingsProps) {
   const form = getFormSettingsSchema();
+  const [isValid, setIsValid] = useState(true);
   const [submission, setSubmission] = useState(() =>
     formSettingsToSubmission(formDefinition)
   );
 
   const onChange = useCallback(
-    (newSubmission: Submission<FormSettingsSchema>) => {
-      if (!isEqual(submission.data, newSubmission.data)) {
-        setSubmission(newSubmission);
+    ({ data, isValid }: ChangedSubmission<FormSettingsSchema>) => {
+      if (isValid) {
+        setSubmission({ data });
       }
+      setIsValid(isValid);
     },
     [submission]
   );
 
+  useEffect(() => {
+    const input = formSettingsToSubmission(formDefinition);
+    if (formDefinition?._id && !isEqual(submission.data, input.data)) {
+      setSubmission(input);
+    }
+  }, [formDefinition?._id]);
+
   return {
     options,
     form,
     type: formDefinition.type,
     submission,
     onChange,
+    isValid,
+    setIsValid,
     onSubmit: () => {
       onSubmit(submissionToFormSettings(formDefinition, submission));
     }
@@ -53,7 +64,8 @@ export function FormSettings(props: FormSettingsProps) {
     submission,
     options = {},
     onChange,
-    onSubmit
+    onSubmit,
+    isValid
   } = useFormSettings(props);
 
   const i18n = options.i18n || ((f: string) => f);
@@ -69,6 +81,7 @@ export function FormSettings(props: FormSettingsProps) {
 
       <button
         data-testid='submit'
+        disabled={!isValid}
         className={"mt-5 btn btn-primary"}
         onClick={onSubmit}
       >

packages/react-formio/src/components/form-settings/formSettings.stories.tsx

@@ -29,9 +29,7 @@ export default {
 export const Sandbox = (args: any) => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore
-  return (
-    <FormSettings {...args} options={{ template: "tailwind", iconset: "bx" }} />
-  );
+  return <FormSettings {...args} />;
 };
 
 Sandbox.args = {