equal-jade
equal-jade2y ago

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
Omer
Omer2y ago
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.
Omer
Omer2y ago
Strapi-v4 | refine
refine supports the features that come with Strapi-v4.
equal-jade
equal-jade2y ago
So I am using default value, the issue is on initial render the multi select is empty .
Omer
Omer2y ago
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.
equal-jade
equal-jade2y 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
equal-jade
equal-jade2y 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]
Omer
Omer2y ago
Thank you. We'll review it on Monday morning 🚀
equal-jade
equal-jade2y 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?
Omer
Omer2y ago
Yes, you can use the "select" property ⚡️ https://discord.com/channels/837692625737613362/1051420713032110080
equal-jade
equal-jade2y 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 );