magic-amber•2y 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

magic-amber•2y ago

And also maybe if there is a possibility to pass a react node with custom design layout then that would be amazing 😍

Omer•2y ago

Hey @dipbazz 👋 , I hope you are very well. Can you check this thread? https://discord.com/channels/837692625737613362/940873134020640788/940877337237528608

magic-amber•2y ago

Thank you @Omer. It worked as I expected.

mute-gold•13mo ago

@Omer do you remember the actual thread you posted here? It's no longer visible and I have the exact same requirement 😅

Omer•13mo 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
   }))}
/>

mute-gold•13mo 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•13mo ago

You can use the defaultValue property https://refine.dev/docs/api-reference/core/hooks/useSelect/#defaultvalue

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.

mute-gold•13mo ago

What's your comment referring to?