[BUG] editgrid > datetime component didn't update when logic value changed

[gks66]

Environment

• Hosting type
  • [x] Form.io
• Formio.js version: 4.1.10
• Frontend framework:
• Browser: Chrome

Steps to Reproduce

1. Create form with Json schema :

   {    "display": "form",    "settings": {        "pdf": {            "id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",            "src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"        }    },    "components": [        {            "label": "Edit Grid",            "tableView": false,            "rowDrafts": false,            "key": "editGridObservation",            "type": "editgrid",            "input": true,            "components": [                {                    "label": "Select",                    "widget": "choicesjs",                    "tableView": true,                    "data": {                        "values": [                            {                                "label": "3days",                                "value": "days3"                            },                            {                                "label": "7days",                                "value": "days7"                            }                        ]                    },                    "selectThreshold": 0.3,                    "key": "selectAction",                    "logic": [                        {                            "name": "ln",                            "trigger": {                                "type": "javascript",                                "javascript": "let selectVal = row.selectAction;\nswitch(selectVal){\n  case 'days3': \n    row.dateTimeAction = moment().set({'hour': 0, 'minute': 0, 'second': 0, 'millisecond': 0}).add(3, 'days').format('YYYY-MM-DD HH:mm:ssZ').replace(' ', 'T');\n    break;\n  case 'days7': \n    row.dateTimeAction = moment().set({'hour': 0, 'minute': 0, 'second': 0, 'millisecond': 0}).add(7, 'days').format('YYYY-MM-DD HH:mm:ssZ').replace(' ', 'T');\n    break;\n  default:\n    break;\n}\nresult = row"                            },                            "actions": []                        }                    ],                    "type": "select",                    "indexeddb": {                        "filter": {}                    },                    "input": true                },                {                    "label": "Date / Time",                    "tableView": false,                    "enableMinDateInput": false,                    "datePicker": {                        "disableWeekends": false,                        "disableWeekdays": false                    },                    "enableMaxDateInput": false,                    "key": "dateTimeAction",                    "type": "datetime",                    "input": true,                    "widget": {                        "type": "calendar",                        "displayInTimezone": "viewer",                        "locale": "en",                        "useLocaleSettings": false,                        "allowInput": true,                        "mode": "single",                        "enableTime": true,                        "noCalendar": false,                        "format": "yyyy-MM-dd hh:mm a",                        "hourIncrement": 1,                        "minuteIncrement": 1,                        "time_24hr": false,                        "minDate": null,                        "disableWeekends": false,                        "disableWeekdays": false,                        "maxDate": null                    }                }            ]        },        {            "type": "button",            "label": "Submit",            "key": "submit",            "disableOnInvalid": true,            "input": true,            "tableView": false        }    ]}

2. Select option from dropdown.
3. The date value in field no changed, but the form submission data updated after editgrid saved.
4. Open the saved record, the datetime display is wrong also, it show first day of month.

Expected behavior

The datetime component should update when the dropdown option is seleted.

Example

1.

2.

3.

4.

[wag110894]

@gks66 are you really using version. 4.1.10 of the formio.js library? If so, then we recommend upgrading to a newer version. Our latest stable version of the formio.js library is 4.11.3.

Can you try and see if this issue occurs on the latest?

Thank you.

[gks66]

Sorry, the version is 4.11.1 I am using https://formio.github.io/formio.js/app/sandbox to test, not working also.

[wag110894]

It looks like you have not added an Action to the Logic on the select component. Here is an example of our field logic: https://formio.github.io/formio.js/app/examples/fieldLogic.html

I hope that this helps.

[gks66]

Hi, tried with the example, it was not working.

New sample json:

{
  "display": "form",
  "settings": {
    "pdf": {
      "id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
      "src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
    }
  },
  "components": [
    {
      "label": "Edit Grid",
      "tableView": false,
      "redrawOn": "data",
      "rowDrafts": false,
      "key": "editGridObservation",
      "type": "editgrid",
      "input": true,
      "components": [
        {
          "label": "Select",
          "widget": "choicesjs",
          "tableView": true,
          "data": {
            "values": [
              {
                "label": "3 days",
                "value": "days3"
              },
              {
                "label": "7 days",
                "value": "days7"
              }
            ]
          },
          "selectThreshold": 0.3,
          "key": "selectAction",
          "type": "select",
          "indexeddb": {
            "filter": {}
          },
          "datetiemAction": "2020-09-03T00:00:00+08:00",
          "input": true
        },
        {
          "label": "Date / Time",
          "tableView": false,
          "enableMinDateInput": false,
          "datePicker": {
            "disableWeekends": false,
            "disableWeekdays": false
          },
          "enableMaxDateInput": false,
          "key": "dateTimeAction",
          "logic": [
            {
              "name": "days3",
              "trigger": {
                "type": "simple",
                "simple": {
                  "show": true,
                  "when": "editGridObservation.selectAction",
                  "eq": "days3"
                }
              },
              "actions": [
                {
                  "name": "days3",
                  "type": "value",
                  "value": "value=moment().add(3,'days').format('YYYY-MM-DD HH:mm:ssZ')"
                }
              ]
            },
            {
              "name": "days7",
              "trigger": {
                "type": "simple",
                "simple": {
                  "show": true,
                  "when": "editGridObservation.selectAction",
                  "eq": "days7"
                }
              },
              "actions": [
                {
                  "name": "days7",
                  "type": "value",
                  "value": "value=moment().add(7,'days').format('YYYY-MM-DD HH:mm:ssZ')"
                }
              ]
            }
          ],
          "type": "datetime",
          "input": true,
          "widget": {
            "type": "calendar",
            "displayInTimezone": "viewer",
            "locale": "en",
            "useLocaleSettings": false,
            "allowInput": true,
            "mode": "single",
            "enableTime": true,
            "noCalendar": false,
            "format": "yyyy-MM-dd hh:mm a",
            "hourIncrement": 1,
            "minuteIncrement": 1,
            "time_24hr": false,
            "minDate": null,
            "disableWeekends": false,
            "disableWeekdays": false,
            "maxDate": null
          }
        }
      ]
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ]
}

[ROSHANDBIT]

yes, its now working for me too. Any solution available?

[olgabann]

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!