Multiselect with a data source, handling values that don't map

I have an array of ids mapped to a query (of objects, each with an id property) on a multiselect component.

If there is no matching object in the source query (due to bad data in the original array), the multiselect component omits the bad value from being displayed -- but retains the "bad" value in the component's value property.

it would be useful if the mapped options for the component gave us a way to display the bad value, such as interpreting the item as null and allowing us to set an error message. This would allow the user to see that a value is bad and to remove and replace it with a "good" value from the mapped data source.

Hey @evanatonecare!

For some additional context would you mind providing a specific example of the "bad" data being passed to your select component? Screenshots or code samples may be super helpful :slightly_smiling_face:

Never mind, I solved it with a transformer that maps the source array to objects in the query, creating an object for each one that doesn't exist in the query.

const validRecords = {{ }}; // [ {...}, {...}, {...} ]
const recordIds = {{ stateRecords.value }}; // [9, 22, 148, 2018, 3096]

return => {
  const r = validRecords.filter(r => === id)[0];
  if (_.isNil(r)) {
    return {
      value: id,
      label: `Unmatched record #${id}`,
      disabled: true,
      color: '#f00',

  return {
    label: r.displayName,
    color: r.color,
1 Like