I'm not able to map captions to custom values in a Select Input component. I tried something like this:
Name: {{ item.name}}
Caption: {{ item.team === "" ? "Add new:" : item.team}}
Please let me know if this is possible without creating a custom component!
Hey Gazala! Your example seems to work here, I think this might be a data type or structure issue. Is the .team property available and exactly equal to an empty string?
As a side note, doing an || OR operator here as a short circuit would do a boolean check on that property and return the next option if falsey and would catch undefined, null, false, or empty string values:\
Thanks for taking a look Alex. I'm actually thinking of the case where the option is NOT mapped, ie, when "Allow custom values" is selected, and we type a value that is not in the mapped data. So the structure does not exist. In your example, if you start typing a sixth option "John Doe".
Ah, so if the option isn't part of that data set, it is taking the user input as the value of that newly created and selected option. The captions property here is only a 5 item length array, so when the 6th custom value is mapped it doesn't have an index to pull:
Since there's no way for a user to input a caption value here, we need to instead concat a default object onto the array of potential options in the select component and we could add that default team property caption here as well. The user input will be set as the select component's new value when selected.
We'll want to reference the source
{{
//check whether the existing options include this team name
formatDataAsObject(query1.data).id.includes(self.value) ?
//if we have selected an existing option, just return the normal list
query1.data :
//if we have selected a custom option, return the existing options with a default object concat-ed to it
query1.data.concat(
{name: self.value, team: 'Add new:'}
)
}}
