I want to combine option labels in the useSelect hook of refine antd.

This only shows firstName as label as expected.

  const { selectProps: userSelectProps } = useSelect({
    resource: "users",
    defaultValue: ordersData?.userId,
    optionLabel: "firstName",
    optionValue: "id",
  });

  const { selectProps: userSelectProps } = useSelect({
    resource: "users",
    defaultValue: ordersData?.userId,
    optionLabel: "firstName",
    optionValue: "id",
  });

I want to show both firstName and lastName. Is there a way to acheive this? I wanted something like:

  const { selectProps: userSelectProps } = useSelect({
    resource: "users",
    defaultValue: ordersData?.userId,
    optionLabel: (option) => `${option.firstName} ${option.lastName}`,
    optionValue: "id",
  });

  const { selectProps: userSelectProps } = useSelect({
    resource: "users",
    defaultValue: ordersData?.userId,
    optionLabel: (option) => `${option.firstName} ${option.lastName}`,
    optionValue: "id",
  });

27 Replies

kapa.ai•16mo ago

Hi @srest.nishant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can achieve this by using the optionLabel property as a function. Here's how you can modify your useSelect hook to display both firstName and lastName as the label:

const { selectProps: userSelectProps } = useSelect({
  resource: "users",
  defaultValue: ordersData?.userId,
  optionLabel: (option) => `${option.firstName} ${option.lastName}`,
  optionValue: "id",
});

const { selectProps: userSelectProps } = useSelect({
  resource: "users",
  defaultValue: ordersData?.userId,
  optionLabel: (option) => `${option.firstName} ${option.lastName}`,
  optionValue: "id",
});

This will concatenate the firstName and lastName properties of each option and display them as the label in the select component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

<@717251086196539412> kapa.ai is still learning and improving, please let us how it did by reacting below

absent-sapphire•16mo ago

@kapa.ai It doesn't work.

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•16mo ago

---------------------- I apologize for the confusion earlier. It seems that I made an error in my response. Based on the information provided in the extracts, the optionLabel property only accepts a string, not a function. Unfortunately, the extracts do not provide a direct solution for displaying both firstName and lastName as the label using the useSelect hook. However, you can refer to the refine useSelect documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/) for more information on its usage and properties. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

useSelect | refine

useSelect hook allows you to manage Ant Design `` component when records in a resource needs to be used as select options.

kapa.ai•16mo ago

<@717251086196539412> kapa.ai is still learning and improving, please let us how it did by reacting below

ratty-blush•16mo ago

Unfortunately, useSelect can't do this right now, but you can map the values as you want before passing the options property to the '<Select>' component.

Omer•16mo ago

Hey @srest.nishant , You can find an example here https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/#can-i-create-the-options-manually

useSelect | refine

useSelect hook allows you to manage Ant Design `` component when records in a resource needs to be used as select options.

absent-sapphire•16mo ago

Thank you, I used similar approach!

Omer•16mo ago

I'm happy to hear that 🎯

magic-amber•16mo ago

@Omer isn't what Nishant posted exactly what you would want to do? Is there a feature-request for this? Otherwise I'd be happy to open one 🙂

magic-amber•15mo ago

So I built this very ugly implementation on top of what Nishant did here:

  const absenceData = queryResult?.data?.data;
  const { queryResult: personQueryResult, selectProps: personSelectProps } = RefineAntd.useSelect({
    resource: 'persons',
    defaultValue: absenceData?.person_id,
    dataProviderName: 'damon',
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore: TS2322: Type 'string' is not assignable to type 'undefined'.
    optionLabel: getAccessorFor('person'),
  });
  personSelectProps.options =
    personQueryResult.data?.data.map((item) => ({
      label: getDisplayFor('person')(item),
      value: (item as any).id,
    })) || [];

  const absenceData = queryResult?.data?.data;
  const { queryResult: personQueryResult, selectProps: personSelectProps } = RefineAntd.useSelect({
    resource: 'persons',
    defaultValue: absenceData?.person_id,
    dataProviderName: 'damon',
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore: TS2322: Type 'string' is not assignable to type 'undefined'.
    optionLabel: getAccessorFor('person'),
  });
  personSelectProps.options =
    personQueryResult.data?.data.map((item) => ({
      label: getDisplayFor('person')(item),
      value: (item as any).id,
    })) || [];

As I need to access properties generically I use functions to get the correct properties out of a register for all of my models. Here I run into the problem that if I access a "Edit"-Page and the element that is received is not within the first 20 results, I don't see my label for the Select but just the ID (see screenshot).

magic-amber•15mo ago

There's a request running that filters for the correct ID, but the result is never properly used, as I have probably overwritten something that you do inside of Refine. The type on UseSelectProps of optionLabel?: keyof TQueryFnData extends string ? keyof TQueryFnData : never; is very restricting and casts the TQueryFnData if it's not defined btw. I don't know if that's your intention here. I don't know if somebody from @core could take a look here, I'd be very happy 🙂 @alicanerdurmaz do you maybe have a spare minute for this?

ambitious-aqua•15mo ago

i trying to understand

magic-amber•15mo ago

I'm trying to reproduce using codesandbox as well.