metropolitan-bronze•2y ago

The default value seems to not be valid for the Select component, mode='multiple '

The data comes back fine, but it is not displayed on the component I wrote it with reference to this, but this one is single-select 👇 https://github.com/refinedev/refine/blob/master/examples/form-antd-use-form/src/pages/posts/edit.tsx I've tried giving a default value manually 👇 But it didn't live up to my expectations

 const { selectProps: localeCountry } = useSelect({
    resource: 'xxx',
    optionLabel: 'name',
    pagination: {
      mode: 'server',
    },
    defaultValue: ['1','2'],
  })

 const { selectProps: localeCountry } = useSelect({
    resource: 'xxx',
    optionLabel: 'name',
    pagination: {
      mode: 'server',
    },
    defaultValue: ['1','2'],
  })

The component will look like this Need your help！ thank you！👨🏻‍💻

GitHub

refine/edit.tsx at master · refinedev/refine

Build your React-based CRUD applications, without constraints. - refine/edit.tsx at master · refinedev/refine

6 Replies

kapa.ai•2y ago

Hi @greenking19. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're trying to use the useSelect hook for a multi-select component. The defaultValue property accepts both single values and arrays of values. However, you also need to make sure that the Ant Design Select component is set to allow multiple selections. To achieve this, you can update your Select component by adding the mode prop and setting it to "multiple":

import { Select } from "antd";

// ...

return (
  <Select
    mode="multiple"
    placeholder="Select items"
    style={{ width: 300 }}
    {...localeCountry}
  />
);

import { Select } from "antd";

// ...

return (
  <Select
    mode="multiple"
    placeholder="Select items"
    style={{ width: 300 }}
    {...localeCountry}
  />
);

This should allow you to use the useSelect hook with multiple default values as you've specified in your code:

const { selectProps: localeCountry } = useSelect({
  resource: 'xxx',
  optionLabel: 'name',
  pagination: {
    mode: 'server',
  },
  defaultValue: ['1', '2'],
});

const { selectProps: localeCountry } = useSelect({
  resource: 'xxx',
  optionLabel: 'name',
  pagination: {
    mode: 'server',
  },
  defaultValue: ['1', '2'],
});

For more information on the useSelect hook, you can refer to the refine documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

extended-salmon•2y ago

Hey @greenking19, defaultValue prop on useSelect just fetch the given values and add among the select options. So, you can use the defaultValue of Select component. Also, if you use the useForm hook, you can set field values by using useForm return function

metropolitan-bronzeOP•2y ago

I found a solution🥳

metropolitan-bronzeOP•2y ago

Github is written in a single choice github: https://github.com/refinedev/refine/blob/master/examples/form-antd-use-form/src/pages/posts/edit.tsx

 const { selectProps: categorySelectProps } = useSelect<ICategory>({
        resource: "categories",
        defaultValue: postData?.category.id,
 });

 const { selectProps: categorySelectProps } = useSelect<ICategory>({
        resource: "categories",
        defaultValue: postData?.category.id,
 });

This is required if it is multi-select

 const { selectProps: categorySelectProps } = useSelect<ICategory>({
        resource: "categories",
        defaultValue: postData?.categories,
 });

 const { selectProps: categorySelectProps } = useSelect<ICategory>({
        resource: "categories",
        defaultValue: postData?.categories,
 });

I hope you can add this feature to the example so that it will be convenient for other developers Thank you for your help🥳

GitHub

refine/edit.tsx at master · refinedev/refine

Build your React-based CRUD applications, without constraints. - refine/edit.tsx at master · refinedev/refine

metropolitan-bronzeOP•2y ago

Sorry, this still doesn't work, and you still need to use form.setFieldsValue in the end. Forgot to comment the code just now 😢

The default value seems to not be valid for the Select component, mode='multiple '

Did you find this page helpful?