Revert data back to original content

I, I feel I am missing something here, or perhaps I have stumbled across a limitation in the Tina architecture. If anyone can help, it would be greatly appreciated.

I am running Tina within an instance of Create React app, and as a proof of concept I’m rendering out the following page:

export function Home() {
  const { enabled } = useCMS();

  const [data, form, loading] = useForm({
    id: "homePageForm",
    label: "Edit Page",
    fields: [
      {
        name: "body",
        label: "Body",
        component: "textarea",
      },
    ],
    loadInitialValues: () => {
      return Promise.resolve({ body: "Test" });
    },
    onSubmit(formData) {
      console.log("Submitting", formData);
    },
  });

  usePlugin(form);

  return (
    <LayoutBase>
      <h1>Home</h1>
      {loading ? (
        "Loading"
      ) : (
        <p style={{ whiteSpace: "pre-line" }}>{data.body}</p>
      )}
    </LayoutBase>
  );
}

Expected behaviour
The content Test will render to the page on load and if I enable Tina and update the Body field to Test Content, the string Test Content will be rendered to the page.

When exiting Tina, the Body content should revert to Test.

Observed behaviour
The Body field content persists with the string Test Content when exiting Tina

I’m a little confused why the data would not revert back to the original content and can not find any methods on the returned useForm hook to manually revert the data.

Thanks

James

Thanks for the question @BinaryJim this is not the behaviour of TinaCMS (not sure why) but you can pretty easily add this behaviour. Simply add this below your form and you will get the behaviour you want.

cms.events.subscribe("cms:disable", (event) => {
    form.reset();
  });

This will listen for the CMS disable event and then reset the form when it is disabled. Better yet, you could reset all the forms by doing this (If this is the behaviour you want)

cms.events.subscribe("cms:disable", (event) => {
    cms.forms.all().forEach((form) => {
      form.reset();
    });
  });

Hey @logan - that’s really helpful, thanks for the reply.