refine
refine copied to clipboard
refinedev
[FEAT] custom optionLabel and remove duplicate list in useSelect hook.
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,
})
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.
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,
})
Hello @Souradeephazra123, do you have time to work on this issue? If not, I'll unassign it so someone else can take it! Best.
Yes sir, I want to work, it was going exam, that's why I didn't open github for some days.
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
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 👍
