Select Component with a "big list of options" with pagination API does not resolve attributes name (label name) displayed. Label Name resolution is not proper.

[Nishit M]

Environment:

• Hosting type : Form.io
• Version: Latest version (https://formio.github.io/formio.js/app/builder.html)
• Browser: Microsoft Edge
• Browser version: Version 120.0.2210.61 (Official build) (64-bit)

Steps to Reproduce

1. Add a select component.
2. In data tab choose Data Source Type as URL
3. choose the API with pagination which gives data and configure the Data Path and Value Property accordingly.
4. As in this example I am using a public API with the pre-data and pagination limit present. The label attribute is not here so the label name would be displayed as undefined here other wise it would display the label name if the attribute is present.
5. The issue what is happening is in default value if you have some data selected which is not part of initial list in the paginated API the label name would not come up. Instead its value is showing.
6. The same behavior is happening when you have two tabs and select data which is not part of initial list in the paginated API from the tab1 in select component and switch to other tab and come up, switching back to an old tab, name resolution is not proper. Instead of label the value is getting displayed which seems to be very ugly.

Expected behavior

Name Resolution should be proper if the Select Component with a "big list of options" with pagination API is used. Also switching back to tabs the selected value should retain the label name even though if it is not part of initial list.

Observed behavior

The issue what is happening is in default value if you have some data selected which is not part of initial list in the paginated API the label name would not come up. Instead its value is showing.

The same behavior is happening when you have two tabs and select data which is not part of initial list in the paginated API from the tab1 in select component and switch to other tab and come up, switching back to an old tab, name resolution is not proper. Instead of label the value is getting displayed which seems to be very ugly.

Note:

The values here is coming undefined only because the API response doesn't have label attribute. And the value is coming for some field which is not showing the label as it is not part of initial list. The values part of initial list comes as undefined here.

Attaching GIF

Form 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": "Select",
            "widget": "choicesjs",
            "tableView": true,
            "multiple": true,
            "dataSrc": "url",
            "defaultValue": [
                98.29873,
                79.982834,
                135.28113
            ],
            "data": {
                "url": "https://api.artic.edu/api/v1/artworks/search?q=cats",
                "headers": [
                    {
                        "key": "",
                        "value": ""
                    }
                ]
            },
            "valueProperty": "_score",
            "searchEnabled": false,
            "useExactSearch": true,
            "key": "select",
            "type": "select",
            "selectValues": "data",
            "disableLimit": false,
            "limit": 25,
            "input": true
        },
        {
            "type": "button",
            "label": "Submit",
            "key": "submit",
            "disableOnInvalid": true,
            "input": true,
            "tableView": false
        }
    ]