DualListSelector: support list of objects as options

[xprazak2]

Describe the issue. What is the expected and unexpected behavior?

availableOptions and chosenOptions props have the type React.ReactNode[] | DualListSelectorTreeItemData[]. When using basic select (no tree/checkboxes), I would like to pass array of objects as available and chosen options.

The use case is to separate what is presented to user for selection and how the items are identified. We often want to present a user-friendly name while keeping track of the items by id.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

const available = [{ id: 'xyz', name: 'First available' }, { id: 'pqr', name: 'Second available' }]
const chosen = [{ id: 'abc', name: 'First chosen' }]

<DualListSelector
  availableOptions={available}
  chosenOptions={chosen}
/>

A posiblilty is to use a formatter function: { id: 'abx', toString: () => "Pretty name for users" }

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?

Enhancement

[tlabaj]

cc @nicolethoen

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[nicolethoen]

I think this can still happen - @xprazak2 is this still something you need?

[xprazak2]

@nicolethoen, there is no urgent need, it is an enhancement that would make it easier to use the component.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[nicolethoen]

For now, there is a way to pass more data to available or chosen options in a dynamically generated DualListSelector.
You will always have more flexibility if you build your Dual List Selector composably, but I've created a code sandbox to demonstrate how to pass more information to your Dual List Selector items.
https://codesandbox.io/s/nifty-wave-z4ppuj?file=/index.js

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[guillaumevincent]

Can we reopen this issue ?

Basically the solution proposed is: Build an array of React Node and hide the id in the data-id property.

availableOptions: available.map(a=>(<span data-id={a.id}>{a.name}</span>))

Then in the onListChange get the id yourself and rebuild the array of objects.

const chosenOptions = newChosenOptions.map((o) => availableOptionsByIds[o.props["data-id"]]);

It seems a little hacky to me. And it adds extra work in my code because I need to create and save availableOptionsByIds apart instead of using availableOptions directly.

--

One solution for me is to use (like in other components like Patternfly Select component) an array of string or an array of Object with a toString method.

Or define an API saying, if you pass an array of object, you need a 'name' properties.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.