Submit multiple forms on click of ToolBar save button

Hey,

I’m attempting to compile a page from various remote data points and have decided to encapsulate each data instance within its own react component; thus abstracting data fetching, form initialisation and form submission (cleaner logic). I am however having an issue with submitting each of these data instances and any help would be appreciated.

Expected behaviour
When clicking the Save button in the Tina toolbar UI, all registered forms onSubmit method should call (if the data has changed via user input). As an alternative a callback for the toolbar Save button could be used, but there does not appear to be an option.

Observed behaviour
When creating a page of multiple form instances, and changing the data via user input, clicking the Save button on the Tina Toolbar only fires the first registered form onSubmit method. Additional forms onSubmit methods are not called.

See the example code below for context on the issue.

import React from "react";
import { LayoutBase } from "./layout-base";
import { useForm, usePlugin} from "tinacms";
import { InlineForm, InlineTextarea } from "react-tinacms-inline";

export function Home() {
  return (
    <LayoutBase>
      <h1>Home</h1>
      <RemoteContent data="Remote data one" id="1" />
      <RemoteContent data="Remote data two" id="2" />
    </LayoutBase>
  );
}

function RemoteContent({ data, id }) {
  const [, form] = useForm({
    id: id,
    label: "Edit Page",
    fields: [
      {
        name: "body",
        label: "Body",
        component: "textarea",
      },
    ],
    initialValues: { body: data },
    onSubmit(formData) {
     // This is only fired for form id 1 when clicking the toolbar Save button
      console.log("Submitting", formData);
    },
  });

  usePlugin(form);

  return (
      <InlineForm form={form}>
        <InlineTextarea name="body" />
      </InlineForm>
  );
}

Thanks

@BinaryJim I agree this behaviour is not the best. The idea behind this is we did not want users to unknowingly save forms. I am not 100% sure if this will work but it should be able to get you going in the right direction. In the first form you can add this.

 cms.forms.all().forEach((form) => {
    form.submit();
  });

This should find all forms and submit them. You could also filter the forms as well