mere-teal
mere-teal14mo 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
No description
6 Replies
kapa.ai
kapa.ai14mo 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
kapa.ai14mo ago
<@1011989779199574036> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade
deep-jade14mo 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
mere-teal
mere-teal14mo ago
I found a solution🥳
mere-teal
mere-teal14mo 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
mere-teal
mere-teal14mo 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 😢