[FEAT] custom optionLabel and remove duplicate list in useSelect hook.

[dipbazz]

Is your feature request related to a problem? Please describe.

I wanted to add a custom optionLabel in useSelect hook which I couldn't manipulate in useSelect options, @omeraplak have helped me with creating a custom options which resolved my issues as below:

const { selectProps, queryResult, defaultValueQueryResult } = useSelect({
        resource: "resource",
});

const allOptions = [
    ...(queryResult?.data?.data || []),
    ...(defaultValueQueryResult?.data?.data || [])
];

// in select components I have created my custom option label as below.
<Select
    {...selectProps}
    options = {allOptions.map((p: IPoint) => ({
        label: `${p.location_name} - ${p.landmark}`,
        value: p.id
    }))}
/>

This was working fine but whenever I search in my select input box my default value get pushed to the list which result in a duplicate value showing multiple times.

Describe alternatives you've considered

I have tried to remove duplicate value by creating a function that filters out duplicate value as below:

const uniqueArrayofObject = <TData extends { id: number | string }>(options: TData[]): TData[] => {
    return Array.from(new Set(options.map(a => a.id)))
      .map(id => options.find(a => a.id === id)) as TData[];
}

And using this function on my allOptions:

const allOptions = uniqueArrayofObject<IPoint>([
    ...(queryResult?.data?.data || []),
    ...(defaultValueQueryResult?.data?.data || [])
]);

Additional context

No response

Describe the thing to improve

If we could have an option to create a custom optionLabel and filter out data based on unique value from the record that could solve this issue. As suggested by @salihozdemir useSelect can have a function that returns a custom optionLabel and unique value from item to compare for duplicate as

useSelect({
    optionLabel: (item) => `${item.someField} ${item.anotherField}`,
    optionValue: (item) => item.foo.id,
})

[BatuhanW]

Hello @dipbazz thanks for the detailed issue! @salihozdemir actually created a task in our backlog as you guys communicated. Would you like to create a PR for this one? If not, we'll deliver it in the coming weeks.

[BatuhanW]

We've discussed this internally and agreed to continue with @dipbazz's suggestion.

useSelect({
    optionLabel: (item) => `${item.someField} ${item.anotherField}`,
    optionValue: (item) => item.foo.id,
})

[Souradeephazra123]

@ BatuhanW , Can you assign me this issue?

[BatuhanW]

Hello @Souradeephazra123, do you have time to work on this issue? If not, I'll unassign it so someone else can take it! Best.

[Souradeephazra123]

Yes sir, I want to work, it was going exam, that's why I didn't open github for some days.

[ruthvik129]

Hello @BatuhanW is it okay if i take up this issue if not closed yet

[BatuhanW]

Hello @ruthvik129 assigned to you!

[ruthvik129]

Hello @BatuhanW i see 2 useSelect hooks for , i am assuming it to be this one https://github.com/refinedev/refine/blob/master/packages/core/src/hooks/useSelect/index.ts and not the one under antD

Also , is there a storybook instance or similar to have a look at how the useSelect hook is working and to preview my changes

[Conqxeror]

Brother @ruthvik129 are you still working on it? Or should I push the changes I have made? Sir @BatuhanW if there is no one working on it as well in team then you can assign this task to me 👍

[BatuhanW]

Hey @Conqxeror assigned, looking forward to your PR! 🙌🏼