[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
  • [x] 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.

[lane-formio]

Thank you for your contribution. As this issue has been inactive for over 90 days, I will close it for now. If you wish to reopen the issue, please respond, and we can resume the triage process.