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>
        <div id="formio"></div>
        <script src="https://cdn.test-form.io/4.19.5-rc.1/formio.full.js"></script>

JavaScript

const TOKEN =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYyZmQzYThiYmQ5OGY2YmRkZDZiNGViYiJ9LCJpc3MiOiJodHRwczovL2FwaS5mb3JtLmlvIiwic3ViIjoiNjJmZDNhOGJiZDk4ZjZiZGRkNmI0ZWJiIiwianRpIjoiNjYzYjAzZGEyNzI5OGY0MTA5ODI1MjVjIiwiZm9ybSI6eyJfaWQiOiI1NTNkYjk0ZTcyZjcwMmU3MTRkZDk3NzkiLCJwcm9qZWN0IjoiNTUzZGI5MmY3MmY3MDJlNzE0ZGQ5Nzc4In0sInByb2plY3QiOnsiX2lkIjoiNTUzZGI5MmY3MmY3MDJlNzE0ZGQ5Nzc4In0sImlhdCI6MTcxODcyNzYxNywiZXhwIjoxNzU1MDE1NjE3fQ.PI0ymrz1KrF3-CCdKZpXH0ZHMnubxTtbOWD49F69zl4';
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);
  });
});