Not able to populate data in local storage when selected from a select dropdown

I have a select box that populates data from a query.
Lets assume this is the data returned by the query is [{"id":1, "name": "apple"}]

The mapping options entered are -
Value - {{item.id}}
Label - {{item.name}}

Now upon selecting an option from the dropdown, I want to store the selected id and name in the local storage

Have added Event Handlers for change event
with local storage set value
key as id and value as {{select.selectedItem.id}}
But upon selecting it, it doesn't add the right value. the value of key 'id' in the local storage is '' instead of 1

But when I set the local storage value in the event handler as {{select.value}}, it populates the local storage with the right value as 1

What am I missing here or doing anything wrong?

Hello,

Keep in mind, the mapping options are essentially mapping your data to the select component's data structure (value, label, ...). So the key value pair of your data is not available within the select. You will need to use .selectedItem.value to grab the id - or you can use the shortcut .value as you have used.

Yes, but upon using the selectedItem its not populating the right data in the local storage. Its populating '' instead of 1 for the id field

Out of luck, I created a new select box with same mapping and its working with the selectedItem method.
I have the old select box besides it and after selecting an option in that dropdown, it overwrites the name key's value in the localStorage to ''
I don't know what config is making it behave that way.
Do comment on for any inputs or anything that I would have done wrong while configuring it.

Just to clarify, you change the above line into

{{select.selectedItem.value}}

and it still give you ''?

Nopes,
{{select.selectedItem.value}} gives undefined

{{select.selectedItem.name}} gives the right value

Old select gave the result as '' for the same {{select.selectedItem.name}} while newly created select gives the right value.
Old select overwrites the value to '' if an option is selected from it

Got the culprit.

I have a button that has the disabled interaction set to

{{select.value == null}}

which routes to another app and I needed to make sure the user selects a value from the select and only then the button is enabled.

Changed it to

{{select.selectedLabel == null}}

` and it works

1 Like