Trying to use Mantine MultiSelect With One 2 Many Field
The "value" field of the multi select expects ['1','2','3'] but the data being passed by {...getInputProps("field")} is the full related objects {id:x,} is there an example that uses MultiSelect for a one2many with Mantine? (I am using strapi-4)
10 Replies
Hey @lerchmo ,
You can use defaultValue property of useSelect hook ⚡️
https://refine.dev/docs/api-reference/mantine/hooks/useSelect/#defaultvalue
useSelect | refine
useSelect hook allows you to manage an Mantine Select component when records in a resource needs to be used as select options.
Also you can check Strapi v4 doc
https://refine.dev/docs/advanced-tutorials/data-provider/strapi-v4/#relations-population
Strapi-v4 | refine
refine supports the features that come with Strapi-v4.
xenial-blackOP•3y ago
So I am using default value, the issue is on initial render the multi select is empty .
Could you share stackblitz env? You can fork from here https://refine.dev/docs/examples/form/mantine/useForm/
useForm | refine
refine works integrated with useForm of @mantine/form library. Using this package, you can use all the features provided by Mantine in your refine project in a compatible way. You can view the live example or review the source code to see how it's used with Mantine.
xenial-blackOP•3y ago
Refine Form Mantine Use Form Example (forked) - StackBlitz
Run official live example code for Refine Form Mantine Use Form, created by Refinedev on StackBlitz
xenial-blackOP•3y ago
This is super Janky, and is not a 1:1 comparison
your Fake API endpoint actually returns [1,2]
instead of {id:1, id:2}
Still not working correctly though
Using this endpoint: https://api.fake-rest.refine.dev/inferences
But Strapi does not return relations like [1,2]
Thank you. We'll review it on Monday morning 🚀
xenial-blackOP•3y ago
it is returning [{id:1, id:2}]
specifically I added the catetories multiselect, and it is empty on load
This is how I am fixing it now:
const fixedFinish = () => {
return onFinish({
//@ts-ignore
included: included.map((i) => ({ id: i })),
//@ts-ignore
excluded: excluded.map((i) => ({ id: i })),
...rest,
});
};
const AudiencePick: React.FC<AudiencePickProps> = (props: AudiencePickProps) => {
const { value, filterDataOnExactSearchMatch, onChange, data, ...rest } = props;
//@ts-ignore
const strData = data?.map((item) => ({ label: item.label, value: item.value + "" }));
//@ts-ignore
const strValue = value?.map((item) => {
//@ts-ignore
if (typeof item === "object") {
//@ts-ignore
return item.id + "";
} else {
return item;
}
});
const newOnChange = (newVal: string[]) => {
if (onChange) {
console.log(newVal);
onChange(newVal);
}
};
return <MultiSelect {...rest} data={strData} onChange={newOnChange} value={strValue} />;
};
export default AudiencePick;
hacky to say the least
is there a way to modify the shape of the dataProvider data before it gets to the edit component?
Yes, you can use the "select" property ⚡️
https://discord.com/channels/837692625737613362/1051420713032110080
xenial-blackOP•3y ago
this solved it, select: (data) => {
data.data.included = data.data.included.map((i: any) =>
typeof i === "object" ? i.id.toString() : i
);
data.data.excluded = data.data.excluded.map((i: any) =>
typeof i === "object" ? i.id.toString() : i
);