terse quartz
I am trying to include a Mantine MultiSelect in an react-hook-form controlled form but i struggle with the correct implication of the onCreate property. The MultiSelect should be creatable.
The code of the component is:
import type { SelectItem } from '@mantine/core'
import { MultiSelect } from '@mantine/core'
import { Controller, useFormContext } from 'react-hook-form'
export default function ManMultiSelect({
name = '',
label = '',
data = [''],
placeholder = '',
disabled = false,
searchable = false,
nothingFound = 'Leider nichts gefunden',
creatable = false,
}) {
const { control } = useFormContext()
return (
<Controller
name={name}
control={control}
render={({ field: { value, onChange } }) => (
<MultiSelect
placeholder={placeholder}
label={label}
value={value as string[]}
onChange={onChange}
data={data as (string | SelectItem)[]}
disabled={disabled}
clearable
creatable={creatable}
getCreateLabel={(query) => + Füge ${query} hinzu}
// onCreate={}
searchable={searchable}
nothingFound={nothingFound}
className="w-full"
/>
)}
/>
)
}
the component is called via:
<ManMultiSelect
name="trainings"
label="Fortbildungen der Einrichtung"
creatable={true}
searchable={true}
placeholder="Hier die erfolgreich absolvierten Fortbildungen eintragen"
data={facilityDetails?.trainings || []}
/>
How can i create a new value?
untold edge