generous-apricot
generous-apricot•17mo ago

default value mui select with react-hook-form controller

Hi everyone 👋
I try to set a default value to a MUI select with the Controller from react-hook-form but it does not work. I found this
<Controller
render={({ field }) => (
<Select {...field}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
)}
name="Select"
control={control}
/>
<Controller
render={({ field }) => (
<Select {...field}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
)}
name="Select"
control={control}
/>
code snipet in a sandbox which show us how to use a select with a control but i can not find how to set a defaultValue to the select (I try the defaultValue props but it is not working). Does any one how can i do it ?
4 Replies
xenial-black
xenial-black•17mo ago
Hey @harisris I remember that Select was an issue with the defaultValue prop. I suggest you to use <AutoComplete>. https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete/#usage-with-react-hook-form-pankodrefine-react-hook-form https://github.com/refinedev/refine/blob/next/examples/finefoods-mui/src/pages/couriers/edit.tsx You can review the usage cases in the links.
generous-apricot
generous-apricot•17mo ago
i'll try, thank you @yildirayunlu !! i try the autocomplete but i have the same issue. Is it a way to do it with out any props like the other field like a text input ? The select work but the value from the api is not set as the default value in the select/autocomplete
xenial-black
xenial-black•17mo ago
This issue is with react-hook-form. We were able to find a solition like here. https://github.com/refinedev/refine/blob/next/examples/finefoods-mui/src/pages/couriers/edit.tsx You can search for react-hook-form issues for solition.
generous-apricot
generous-apricot•17mo ago
ok thank you @yildirayunlu 💪