stormy-gold
stormy-gold3y ago

How to customize useSelect hooks optionLabel with multiple value?

I have implemented useSelect hook on create form and which is working fine. But now there is an requirement to show the label with combining multiple field. For eg: I have a data as
{
[
{
id: 1,
title: "E-business",
code: "3234",
},
{
id: 2,
title: "Virtual Invoice Avon",
code: "4232",
},
{
id: 3,
title: "Unbranded",
code: "4232",
},
];
}
{
[
{
id: 1,
title: "E-business",
code: "3234",
},
{
id: 2,
title: "Virtual Invoice Avon",
code: "4232",
},
{
id: 3,
title: "Unbranded",
code: "4232",
},
];
}
Now I want my optionLabel to be the combination of title and code as E-business (3234), Virtual Invoice Avon (4232), and Unbranded (4232). Is there a way to achieve this?
8 Replies
stormy-gold
stormy-goldOP3y ago
And also maybe if there is a possibility to pass a react node with custom design layout then that would be amazing 😍
Omer
Omer3y ago
Hey @dipbazz 👋 , I hope you are very well. Can you check this thread? https://discord.com/channels/837692625737613362/940873134020640788/940877337237528608
stormy-gold
stormy-goldOP3y ago
Thank you @Omer. It worked as I expected.
united-yellow
united-yellow2y ago
@Omer do you remember the actual thread you posted here? It's no longer visible and I have the exact same requirement 😅
Omer
Omer2y ago
Hey @bastianwegge 👋 , We're happy to see you! Unfortunately there isn't a very cool way but I created a CodeSandbox for you. https://codesandbox.io/s/refine-use-select-example-forked-s55ne?file=/src/pages/posts/create.tsx
const {
selectProps,
queryResult,
defaultValueQueryResult
} = useSelect();

const allOptions = [
...(queryResult.data?.data || []),
...(defaultValueQueryResult.data?.data || [])
];
const {
selectProps,
queryResult,
defaultValueQueryResult
} = useSelect();

const allOptions = [
...(queryResult.data?.data || []),
...(defaultValueQueryResult.data?.data || [])
];
<Select
{...categorySelectProps}
options={allOptions.map((p) => ({
label: `${p.title}-${p.id}`,
value: p.id
}))}
/>
<Select
{...categorySelectProps}
options={allOptions.map((p) => ({
label: `${p.title}-${p.id}`,
value: p.id
}))}
/>
united-yellow
united-yellow2y ago
@Omer thanks for the sollution! It's much nicer than what I have right now! I don't know if I should open a new thread for this but: Since you posted a way to display the ID of an entity. Is it possible to search by the title OR the id via filters? Ah I got it:
onSearch: (userInput: string) => {
const filters: CrudFilters = [];
filters.push({
field: 'fullname',
operator: 'contains',
value: userInput,
});
if (Number.isInteger(Number(userInput))) {
filters.push({
field: 'id',
operator: 'eq',
value: Number(userInput),
});
}

return filters;
},
onSearch: (userInput: string) => {
const filters: CrudFilters = [];
filters.push({
field: 'fullname',
operator: 'contains',
value: userInput,
});
if (Number.isInteger(Number(userInput))) {
filters.push({
field: 'id',
operator: 'eq',
value: Number(userInput),
});
}

return filters;
},
it's basically working like this! 🎉
Omer
Omer2y ago
useSelect | refine
useSelect hook allows you to manage any select (like a Html `` tag, React Select, etc...) component. Since it is designed as headless, It expects you to handle the UI.
united-yellow
united-yellow2y ago
What's your comment referring to?