sensitive-blue•13mo ago

useAutocomplete default values

I have a controller that renders an autocomplete component. I am using the useAutocomplete hook to get the options, but I need a default value or else I will get the "cannot go from uncontrolled to controlled" error, but I cant set a default value because the useAutocomplete hoook is async. How can I fix this?

5 Replies

kapa.ai•13mo ago

Hi @.chasel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useAutocomplete hook in Refine provides a defaultValue property that allows you to set options as selected by default. This can help you avoid the "cannot go from uncontrolled to controlled" error. The defaultValue property sends a separate useMany query to the backend with the defaultValue and appends it to the options of the select component. This ensures that the default values exist in the current options array. The defaultValue can be a single value or an array of values. Here is an example of how you can use it:

import { useAutocomplete } from "@refinedev/mui";  
import { Autocomplete, TextField } from "@mui/material";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const PostCreate: React.FC = () => {  
 const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 defaultValue: 11,  
 });  
  
 return (  
 <Autocomplete  
 {...autocompleteProps}  
 getOptionLabel={(item) => item.title}  
 isOptionEqualToValue={(option, value) =>  
 value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()  
 }  
 placeholder="Select a category"  
 renderInput={(params) => (  
 <TextField  
 {...params}  
 label="Category"  
 margin="normal"  
 variant="outlined"  
 required  
 />  
 )}  
 />  
 );  
};

import { useAutocomplete } from "@refinedev/mui";  
import { Autocomplete, TextField } from "@mui/material";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const PostCreate: React.FC = () => {  
 const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 defaultValue: 11,  
 });  
  
 return (  
 <Autocomplete  
 {...autocompleteProps}  
 getOptionLabel={(item) => item.title}  
 isOptionEqualToValue={(option, value) =>  
 value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()  
 }  
 placeholder="Select a category"  
 renderInput={(params) => (  
 <TextField  
 {...params}  
 label="Category"  
 margin="normal"  
 variant="outlined"  
 required  
 />  
 )}  
 />  
 );  
};

In this example, defaultValue: 11 sets the default value for the Autocomplete component. The useAutocomplete hook takes care of fetching the data asynchronously and setting the default value. For more details, you can refer to the useAutocomplete documentation (https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below

sensitive-blue•13mo ago

@kapa.ai how can I display and error message when the validation fails on my custom validate function in my controller? I want it to display the error "this field is required". Here is my code:

                <Controller
                    control={control}
                    name="course_id"
                    rules={{
                        required: "This field is required",
                        validate: (value) => {
                            return value?.course_id !== "";
                        },

</Controller>

                <Controller
                    control={control}
                    name="course_id"
                    rules={{
                        required: "This field is required",
                        validate: (value) => {
                            return value?.course_id !== "";
                        },

</Controller>

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In your code, you are using the Controller component from react-hook-form and you have already set up the required rule with the error message "This field is required". This message will be displayed when the field is empty. However, your custom validate function is checking if value.course_id is not an empty string. If value is the actual value of the field, you should check value !== "" instead of value.course_id !== "". Here is the corrected code:

<Controller
    control={control}
    name="course_id"
    rules={{
        required: "This field is required",
        validate: (value) => {
            return value !== "";
        },
    }}
/>

<Controller
    control={control}
    name="course_id"
    rules={{
        required: "This field is required",
        validate: (value) => {
            return value !== "";
        },
    }}
/>

When the validation fails, an error message will be displayed. The way to display this error message depends on the rest of your code. Typically, you would use the errors object from react-hook-form to display the error message for a specific field. For example:

const { control, formState: { errors } } = useForm();

// ...

<Controller
    control={control}
    name="course_id"
    rules={{
        required: "This field is required",
        validate: (value) => {
            return value !== "";
        },
    }}
/>

{errors.course_id && <p>{errors.course_id.message}</p>}

const { control, formState: { errors } } = useForm();

// ...

<Controller
    control={control}
    name="course_id"
    rules={{
        required: "This field is required",
        validate: (value) => {
            return value !== "";
        },
    }}
/>

{errors.course_id && <p>{errors.course_id.message}</p>}

In this example, {errors.course_id.message} will display the error message for the course_id field when the validation fails. For more details, you can refer to the React Hook Form Validation documentation (https://refine.dev/blog/react-hook-form-validation-examples). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below