[BUG] Passing submission data object, doesn't pre-fill the form if DateTime field is in the form

[mlazzarini]

Environment

Please provide as many details as you can:

• Hosting type
  • [x] Form.io
  • [ ] Local deployment
    • Version:
• Formio.js version: 4.3.0
• Frontend framework: React

Expected behavior

The form is pre-filled with submission data

Observed behavior

Passing a submission object doesn't pre fill form data, if the form contains a DateTime field. The behaviour is not always the same: sometimes initialisation works, sometimes it doesn't. If I remove the DateTime field from the form, it always works as expected.

  const formProps = {
    src: formId,
    onSubmitDone: onSubmitCallback,
    submission: {
      data: {
        emailAddress: email,
        gender,
        initials,
        name,
        first_name,
        last_name,
        city,
        zip_code,
        firstName: first_name,
        lastName: last_name,
        zipCode: zip_code,
      },
    },
    options: {
      language: lang,
      i18n: {
        [lang]: {
          de: {
            'Drop files to attach, or': translate('formIO.dropFilesToAttachOr'),
            browse: translate('formIO.browse'),
            'File Name': translate('formIO.fileName'),
            Size: translate('formIO.fileSize'),
          },
        },
      },
    },
  }

<Form {...formProps} />

[sl45sms]

+1 , even for the simplest form, one text field and one dateTime field.

For read only, a workaround is to change the field type like

  formJson.components.forEach((component) => {
    if (component.type == 'datetime') {
      component.type = 'textfield';
    }
  });

[mikekotikov]

@mlazzarini @sl45sms was not able to replicate the issue on @formio/[email protected]. Please make sure you're passing the value for Date / Time component in the right format. For example to pass the current date you can do new Date().toISOString().

[sl45sms]

@mikekotikov Thanks for your kind response. You are right, I've set up a simple react project and works as expected, however inside my main project does have the above behavior as is on @mlazzarini 's project. So, it is probably some strange combination of dependencies. I will dive deeper into this as it is really difficult to replicate the problem.

[sl45sms]

@mikekotikov I found the time to dive deep. The issue (at least for my case) happens when I use translation on form options. If omit 'language' attribute from formOptions works as expected. I will try to resolve the issue, probably something happens around the flatpickr library.

import {Form} from '@formio/react';


const App = () => {

    const form = {
        "components": [
            {
                "autofocus": false,
                "input": true,
                "tableView": true,
                "inputType": "text",
                "inputMask": "",
                "label": "Text",
                "key": "textfield",
                "placeholder": "",
                "prefix": "",
                "suffix": "",
                "multiple": false,
                "defaultValue": "",
                "protected": false,
                "unique": false,
                "persistent": true,
                "hidden": false,
                "clearOnHide": true,
                "spellcheck": true,
                "validate": {
                    "required": false,
                    "minLength": "",
                    "maxLength": "",
                    "pattern": "",
                    "custom": "",
                    "customPrivate": false
                },
                "conditional": {
                    "show": "",
                    "when": null,
                    "eq": ""
                },
                "type": "textfield",
                "labelPosition": "top",
                "inputFormat": "plain",
                "tags": [],
                "properties": {},
                "lockKey": true
            },
            {
                "autofocus": false,
                "input": true,
                "tableView": true,
                "label": "Date Time",
                "key": "dateTimefield",
                "placeholder": "",
                "format": "yyyy-MM-dd hh:mm",
                "enableDate": true,
                "enableTime": true,
                "defaultDate": "",
                "datepickerMode": "day",
                "datePicker": {
                    "showWeeks": true,
                    "startingDay": 0,
                    "initDate": "",
                    "minMode": "day",
                    "maxMode": "year",
                    "yearRows": 4,
                    "yearColumns": 5,
                    "minDate": null,
                    "maxDate": null,
                    "datepickerMode": "day"
                },
                "timePicker": {
                    "hourStep": 1,
                    "minuteStep": 1,
                    "showMeridian": true,
                    "readonlyInput": false,
                    "mousewheel": true,
                    "arrowkeys": true
                },
                "protected": false,
                "persistent": true,
                "hidden": false,
                "clearOnHide": false,
                "validate": {
                    "required": false,
                    "custom": ""
                },
                "type": "datetime",
                "labelPosition": "top",
                "tags": [],
                "conditional": {
                    "show": "",
                    "when": null,
                    "eq": ""
                },
                "properties": {},
                "useLocaleSettings": false,
                "lockKey": true
            }
        ]
    }
    
    const submission = {data:{
        "textfield": "test",
        "dateTimefield": "2023-04-26T07:17:19.789Z"
    }
    }
    const formOptions = {
        noAlerts: true,
        language: 'pl' //any language
      };
    return (
        <div className="App">
            <Form options={formOptions} form={form} submission={submission} />
        </div>
    );
}

export default App;

[sl45sms]

As a workaround, I've tested and works, the following dirty hack.

Override CDN to load flatpickr from local copy and combine flatpickr.min.js with locale js files. Formio.requireLibrary('flatpickr-formio', 'flatpickr-formio', 'http://localhost:3000/cdn/flatpickr-formio/4.6.13-formio.1/flatpickr.min.js');