JSFiddle - React, Tailwind, and code Playground

by brendanbond

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdn.test-form.io/4.19.5-rc.1/formio.full.css" />
        <p>
          I believe the issue here is that change events in the child form do not bubble up as "modified" events to the parent, causing the parent to call `saveDraft` only when its submission data was changed and not when the child submission data was changed.</p>
        <p>v4.19.5-rc.1 bubbles those events properly, causing two network requests to be made when the child form is edited - one to the child submission endpoint and one to the parent, ensuring that the parent submission will include child data. View your network tab to confirm.
        </p>
        <p>
        There is also a server change due to a bug that involved parent data leaking into child submissions on a saveDraft when components have the same keys. I've updated this fiddle to point at an Form.io Enterprise server running those changes.
        </p>
        <div id="formio"></div>
        <script src="https://cdn.test-form.io/4.19.5-rc.1/formio.full.js"></script>

JavaScript

Formio.setBaseUrl("https://remote-dev.form.io")
Formio.setProjectUrl("https://remote-dev.form.io/bbhappytime");
const TOKEN =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjY2NzQ3ZWU0MmRlNDBlNTBlOTllMTFhOCJ9LCJpc3MiOiJodHRwOi8vcmVtb3RlLWRldi5mb3JtLmlvIiwic3ViIjoiNjY3NDdlZTQyZGU0MGU1MGU5OWUxMWE4IiwianRpIjoiNjY3NTgxNjY2NTlkNTVjYjM1NjA0NTJmIiwiaWF0IjoxNzE4OTc2ODcwLCJleHAiOjE3MTg5OTEyNzB9.xrJiObFF8DI_oCA7FNsLvApc2rVjgaKsPzrxR1BnEDw';
Formio.setToken(TOKEN);
let url = 'https://remote-dev.form.io/bbhappytime/sked24saveasdraft';
if (localStorage.getItem('subId')) {
  url += `/submission/${localStorage.getItem('subId')}`;
}
Formio.createForm(document.getElementById('formio'), url, {
  saveDraft: true,
  skipDraftRestore: true,
}).then((form) => {
  form.on('saveDraft', (sub) => {
    console.log("Setting subId to ", sub._id);
    localStorage.setItem('subId', sub._id);
  });
});