Refine•3y 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

kapa.ai•4/12/23, 6:10 PM

Hi @greenking19. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•4/12/23, 6:11 PM

----------------------
It seems like you're trying to use the hook for a multi-select component. The

defaultValue

defaultValue

property accepts both single values and arrays of values. However, you also need to make sure that the Ant Design

Select

Select

component is set to allow multiple selections.

To achieve this, you can update your

Select

Select

component by adding the

mode

mode

prop and setting it to :

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

For more information on the 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

Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•4/12/23, 6:11 PM

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

colossal-harlequin•4/12/23, 10:20 PM

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

recent-tealOP•4/13/23, 1:04 PM

I found a solution

recent-tealOP•4/13/23, 1:10 PM

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

This is required if it is multi-select

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

recent-tealOP•4/13/23, 1:18 PM

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