fair-rose•2y 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

metropolitan-bronze•2y 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.

fair-roseOP•2y 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

metropolitan-bronze•2y 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.

fair-roseOP•2y ago

ok thank you @yildirayunlu 💪

default value mui select with react-hook-form controller

Did you find this page helpful?