Multiselect field not retaining values when editing data

[Jeff76]

I have a form that displays in a modal. When I open the modal the multiselect field is empty. All the other fields on the form retain their values when opening the modal. I'm using {{ table1.selectedRow.data }} to access the data within the form. The form data key has the correct value.

If I try to access the value using {{ field_name.value}} I get this error:

Must be an array of strings, numbers, booleans, null, or undefined.

And the values are: "["Bobby","Frank","Henry","Phillip"]"

I'm not sure how to convert the values to an array of strings. Any help would be great.

[Tess]

Hi @Jeff76!

Thanks for reaching out. Any chance you can share some screenshots? I'm not quite sure if I'm following correctly, but I'm wondering if the value "["Bobby","Frank","Henry","Phillip"]" needs to be parsed like this:

[Jeff76]

So I tried parsing the values using JSON.parse but the multiselect was still empty. Here's a screenshot of the app with the multiselect component in question. You can see the other fields are retaining the saved values.

[Tess]

Hi @Jeff76! Thanks. In the screenshot, it looks like {{ edit_proposal_form. initialData.proposal_painters}} is a string, but the default values field is expecting an array.

As a test, if you hardcode ['Bobby', 'Frank', 'Denise'] into the default values field, does it work as expected?

One thing to keep in mind is that the default value field corresponds to the value, rather than the label. In the below example, I need to reference 3 in my default values array. If I put ['Option 3'] in the default value, it won't work since that is the label not the underlying value.

[Jeff76]

Thanks Tess. So I hardcoded the array ["Denise","Bobby","Henry"] into the default value of the multiselect and got no results. The multiselect field is still blank when I open the modal. I also tried using the code below and the field was still blank. The values in the DB are the same as the hardcoded array. ["Denise","Bobby","Henry"]

{{ JSON.parse(edit_proposal_form.initialData.proposal_painters)}}

[Tess]

Thanks @Jeff76! Can we see a screenshot of how the multiselect options are set up? Similar to my most recent screenshot

[Jeff76]

Thanks Tess. Here's the screenshot you requested. Here I'm using JSON.parse but even with a hardcoded array I get nothening. Hope this helps.

[Tess]

Thank you @Jeff76 I'm still having trouble reproducing this Any chance I can step into your account to take a look? If so, which app is it?

If not, no worries, I'll keep digging into it in my test app

[Jeff76]

Yes, please take a look. It's the edit functionality within the proposal app. This behavior also happens on the Proposal Edit (standalone form) page but with selects, multiselects and date fields. Thanks

[Tess]

Hi @Jeff76

Here's what I would do.

1. Add this transformer to the load query

2. Update all of the components that are populated with the initial data for this new data structure. For example, the contact id will now be {{load_proposal.data[0].contact_id}} instead of {{load_proposal.data.contact_id[0]}}

3. Update the multiselect with this default value: {{JSON.parse(proposal_edit_form.initialData[0].proposal_painters)}}

I did this in a copy of your app in your Retool org if you want to check that out

[Tess]

I think this is a bug with the form data key, which we are tracking internally but it looks like it will work as expected with these changes!

[Jeff76]

Thanks Tess. Your solution worked perfectly for the standalone form. All the form fields display data. However, It didn't work for the proposal edit form (modal & form combo) that displays on the Proposals page. In fact, the data structure didn't change when I added your code to the transformer in the load query.

[Tess]

Hi @Jeff76! I see what you mean. Can you try updating the module form's initial Data to be an array like this:

Then, that syntax should work:

[Jeff76]

Thanks Tess, your solution fixed the issue.

[Tess]

Wonderful to hear!