[BUG] Datetime picker dialog doesn't follow datetime field on scroll

[jaymoradiya]

Environment

Datetime picker dialog doesn't follow datetime field on scroll

• Hosting type
  • Form.io
  • Local deployment
    • Version: ^5.3.0
• Formio.js version: 4.15.1
• Frontend framework: Angular
• Browser: Chrome
• Browser version: 117.0.5938.150

Steps to Reproduce

1. Add div with 300px height
2. Create a form(json given below) and render using form.io renderer inside that div
3. click on datetime to open datetime picker now scroll.

Expected behavior

Datetime picker should follow datetime field on scroll.

Observed behavior

Datetime picker dialog stays where it was open.

Example Code

{
    "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": "First Name",
            "applyMaskOn": "change",
            "tableView": true,
            "key": "textField",
            "type": "textfield",
            "input": true
        },
        {
            "label": "Last Name",
            "applyMaskOn": "change",
            "tableView": true,
            "key": "textField2",
            "type": "textfield",
            "input": true
        },
        {
            "label": "Middle Name",
            "applyMaskOn": "change",
            "tableView": true,
            "key": "textField3",
            "type": "textfield",
            "input": true
        },
        {
            "label": "Gender",
            "optionsLabelPosition": "right",
            "inline": false,
            "tableView": false,
            "values": [
                {
                    "label": "Male",
                    "value": "male",
                    "shortcut": ""
                },
                {
                    "label": "Female",
                    "value": "female",
                    "shortcut": ""
                }
            ],
            "key": "gender",
            "type": "radio",
            "input": true
        },
        {
            "label": "Date Of Birth",
            "format": "yyyy-MM-dd",
            "tableView": false,
            "datePicker": {
                "disableWeekends": false,
                "disableWeekdays": false
            },
            "enableTime": false,
            "enableMinDateInput": false,
            "enableMaxDateInput": false,
            "key": "dateOfBirth",
            "type": "datetime",
            "input": true,
            "widget": {
                "type": "calendar",
                "displayInTimezone": "viewer",
                "locale": "en",
                "useLocaleSettings": false,
                "allowInput": true,
                "mode": "single",
                "enableTime": false,
                "noCalendar": false,
                "format": "yyyy-MM-dd",
                "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
        }
    ]
}

[daneformio]

@jaymoradiya On the data tab of your date time component, add
{"static": true}
to the Flatpickr options, and see if that resolves your issue.