genetic-orange•3mo ago

Title: Ant Design Form Items Display Values Upon Submission

I am using the listing methods from RefineDev, such as useList, along with the Ant Design template. In all forms, when I submit, the value from the select input is displayed. For example, in the code snippet below, the ID is displayed upon submission.

  const { selectProps: officesProps } = useSelect<any>({
      resource: "offices",
      dataProviderName: "rest",
      pagination: {
        mode: "off",
      },
      onSearch: (value) => [
        {
          field: "name",
          operator: "contains",
          value: `%${value.toUpperCase()}%`,
        },
      ],
      optionLabel: (item) => item.name,
      optionValue: (item) => item.id,
    });

  const { selectProps: officesProps } = useSelect<any>({
      resource: "offices",
      dataProviderName: "rest",
      pagination: {
        mode: "off",
      },
      onSearch: (value) => [
        {
          field: "name",
          operator: "contains",
          value: `%${value.toUpperCase()}%`,
        },
      ],
      optionLabel: (item) => item.name,
      optionValue: (item) => item.id,
    });

4 Replies

kapa.ai•3mo ago

Hi @Martola. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In your code snippet, you're using the useSelect hook from Refine with Ant Design. The optionLabel and optionValue properties are used to determine what is displayed in the select input and what value is submitted when the form is submitted, respectively. In your case, optionLabel is set to display the name property of each item, and optionValue is set to submit the id property of each item. This means that when you submit the form, the id of the selected item is what gets submitted, not the name. If you want the name to be submitted instead of the id, you can change the optionValue property to item.name like so:

const { selectProps: officesProps } = useSelect<any>({
  resource: "offices",
  dataProviderName: "rest",
  pagination: {
    mode: "off",
  },
  onSearch: (value) => [
    {
      field: "name",
      operator: "contains",
      value: `%${value.toUpperCase()}%`,
    },
  ],
  optionLabel: (item) => item.name,
  optionValue: (item) => item.name, // Changed from item.id to item.name
});

const { selectProps: officesProps } = useSelect<any>({
  resource: "offices",
  dataProviderName: "rest",
  pagination: {
    mode: "off",
  },
  onSearch: (value) => [
    {
      field: "name",
      operator: "contains",
      value: `%${value.toUpperCase()}%`,
    },
  ],
  optionLabel: (item) => item.name,
  optionValue: (item) => item.name, // Changed from item.id to item.name
});

This will submit the name of the selected item when the form is submitted. For more information on how to use the useSelect hook, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

genetic-orange•3mo ago

I want to continue using the ID as the optionValue. However, the problem arises when submitting the form: it briefly flashes, displaying the value (ID), before reverting to the optionLabel. I would like to prevent the user from seeing the value during this process. @kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @Martola, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?