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

Feature Requests
,
1

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.

2

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:

3

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 = {{ queryGetRecords.data }}; // [ {...}, {...}, {...} ]
const recordIds = {{ stateRecords.value }}; // [9, 22, 148, 2018, 3096]

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

  return {
    value: r.id,
    label: r.displayName,
    color: r.color,
  }
});
1 Like