[BUG] Extra empty item at select component

[weihan1394]

I have recently upgraded the formio to the latest version and I realized this weird behavior at select component. There will always be an empty item above all the specified items as populated from the json. I have attached the behavior for referencing.

Environment

• Hosting type
  • Form.io
  • Local deployment
• Formio.js version: ^4.10.3-rc.3
• angular-material-formio: ^1.19.0
• Frontend framework: angular 8.2.14
• Browser: Chrome
• Browser version: 83.0.4103.106 (Official Build) (64-bit)

Steps to Reproduce

1. Update the json file as below
2. When the form is generated, the select component will have an empty item above.

Expected behavior

No empty item above

Observed behavior

Extra empty item above

Example

Json

{
    "components": [
        {
            "type": "select",
            "label": "Single Select",
            "key": "single",
            "placeholder": "Select one",
            "data": {
                "values": [
                    {
                        "value": "apple",
                        "label": "Apple"
                    },
                    {
                        "value": "banana",
                        "label": "Banana"
                    },
                    {
                        "value": "pear",
                        "label": "Pear"
                    },
                    {
                        "value": "orange",
                        "label": "Orange"
                    }
                ]
            },
            "dataSrc": "values",
            "defaultValue": "banana",
            "template": "<span>{{ item.label }}</span>"
        }
    ]
}

[Asifislam110]

I faced the same need. Could anyone help with implementation? Any advice is welcome

[albert5287]

I have created a PR to solve this issue #144

[haschu]

Hey,
just a friendly reminder that a PR with a quick-fix was submitted by @albert5287.
Should be fairly easy to merge, as it doesn't break anything 🙂