Select list default value of 0 does not display in form or preview

[jalama]

Using https://formio.github.io/formio.js/app/builder I was able to re-create an issue we are having in our application.

In a select list if you set the default value to an option whose value is 0, the label does not display in the select list when previewed or rendered. Choosing another default value, in my case the option with with the value 1, works as expected.

Sample form ( I'm assuming the pdf display settings are added by the demo page):

{
    "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,
            "data": {
                "values": [
                    {
                        "label": "Zero",
                        "value": "0"
                    },
                    {
                        "label": "One",
                        "value": "1"
                    }
                ]
            },
            "selectThreshold": 0.3,
            "key": "select",
            "type": "select",
            "indexeddb": {
                "filter": {}
            },
            "input": true,
            "defaultValue": 0
        },
        {
            "type": "button",
            "label": "Submit",
            "key": "submit",
            "disableOnInvalid": true,
            "input": true,
            "tableView": false
        }
    ]
}

[wag110894]

Hello @jalama, we are not able to replicate this issue on our side when rendering a default of zero.

Here a link to our sandbox: http://formio.github.io/formio.js/app/sandbox sandbox id: 60117d25f1fc77bef8e6d5b6

[jalama]

That's really odd, I was still able to reproduce it one time in the sandbox you sent. On subsequent attempts I got different reactions. It does seem inconsistent, I had another Dev on my team look at the link you sent with my sample form and he saw what I saw.

We got to messing around and discovered what appears to be the source of the inconsistent behavior. The data type of the defaultValue property and the values in the option list, ie data.values property, are not consistent. When we type 0 or 1 into the values they are stored as strings in their respective data.values[x].value properties. I'm guessing there is some sort of issue regarding when the automatic type detection is applied that is not consistent between the Default Value and the option values.

In my sample above when I choose the Default value, ie the defaultValue property, it is saved as an integer when the values in the option list are strings. It appears if I change the Storage Type, ie dataType property, to String before I choose the data type then all works as expected. Emphasis on choosing storage type before choosing the default value, if you choose default value and then choose String as storage type it does not work save the defaultValue as a string.

Couple screenshots of the sandbox page, the first two are using my sample and getting different behavior.

1. Default value is integer 0, values are string. Preview works but the form builder preview is empty

2. Default Value is integer 0, values are strings. Preview shows 0 but the form builder preview is empty

3. Default Value is string "0", values are strings. Preview and form builder preview work as expected.

[jalama]

I forgot to tag @wag110894 in my response above, sorry

[wag110894]

Hello @jalama,

Thanks for reaching out. I have fixed the problem using this sandbox: 6012f0da36fc65b9c3fb7eb5. As you will see, I have set the Storage type to Boolean and set the item template so that the dropdown shows the value and not the label: {{ item.value }}

I hope that this helps. Thank you.

[jalama]

@wag110894 I think you are misunderstanding what I am trying to accomplish here. I don't want the value to be displayed, I want the label to be displayed. Which I understand I can make happen by changing the storage type for the component to string.

Though I think it's a bug that by default the select component stores the default value as an integer while the data source values are store as stings.

[travist]

Yes that is probably a bug where default value is not honoring the "storage type".

[bobslee]

I'm pondering whether this could also be related: https://github.com/formio/formio.js/issues/3498

[wag110894]

For reference, the ticket for this issue will be FIO-1303. We have added it to our backlog and have a process to expedite. Please let me know if you are interested.

[DmitryNistratov]

@jalama Could you try to reproduce this again? It seems that it is no longer relevant. Please let me know if the problem is still reproducible

[jalama]

For us it's still an issue, in fact testing upgrade from 4.13.0 -> 4.13.2 it's worse as it seems to be changing the values in a select list from numbers we set programmatically to camelCase string versions of the label. This is happening in a form we have not changed in month and appears to be happening when the form is rendered, which is really disturbing.

[jalama]

I went ahead an cut a new Bug ticket for this as it really does look like it's worse and I can re-create what appears to be the core problem in a sandbox https://github.com/formio/formio.js/issues/4137