absent-sapphire•6mo ago

Autocomplete not working inside UseModalFormReturnType component

I am trying to use Autocomplete in separate drawer component. When I console.log value onChange or in getOptionLabel, values are there as they should be but nothing shows up in Controller.

5 Replies

kapa.ai•6mo ago

Hi @Tacho. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you're having trouble with the Autocomplete component within a Controller in your useModalForm component. Here's a snippet from the documentation that shows how to use Autocomplete with useForm:

import { Create, useAutocomplete } from "@refinedev/mui";  
import { Box, Autocomplete, TextField } from "@mui/material";  
import { useForm } from "@refinedev/react-hook-form";  
import { Controller } from "react-hook-form";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const PostCreate: React.FC = () => {  
 const {  
 saveButtonProps,  
 refineCore: { formLoading, queryResult },  
 register,  
 control,  
 formState: { errors },  
 } = useForm<IPost, HttpError, IPost & { category: ICategory }>();  
  
 const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 });  
  
 return (  
 <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>  
 <Box component="form">  
 <Controller  
 control={control}  
 name="category"  
 rules={{ required: "This field is required" }}  
 render={({ field }) => (  
 <Autocomplete  
 {...autocompleteProps}  
 {...field}  
 onChange={(_, value) => {  
 field.onChange(value);  
 }}  
 getOptionLabel={({ title }) => 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"  
 error={!!errors.category}  
 helperText={errors.category?.message}  
 required  
 />  
 )}  
 />  
 )}  
 />  
 </Box>  
 </Create>  
 );  
};

import { Create, useAutocomplete } from "@refinedev/mui";  
import { Box, Autocomplete, TextField } from "@mui/material";  
import { useForm } from "@refinedev/react-hook-form";  
import { Controller } from "react-hook-form";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const PostCreate: React.FC = () => {  
 const {  
 saveButtonProps,  
 refineCore: { formLoading, queryResult },  
 register,  
 control,  
 formState: { errors },  
 } = useForm<IPost, HttpError, IPost & { category: ICategory }>();  
  
 const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 });  
  
 return (  
 <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>  
 <Box component="form">  
 <Controller  
 control={control}  
 name="category"  
 rules={{ required: "This field is required" }}  
 render={({ field }) => (  
 <Autocomplete  
 {...autocompleteProps}  
 {...field}  
 onChange={(_, value) => {  
 field.onChange(value);  
 }}  
 getOptionLabel={({ title }) => 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"  
 error={!!errors.category}  
 helperText={errors.category?.message}  
 required  
 />  
 )}  
 />  
 )}  
 />  
 </Box>  
 </Create>  
 );  
};

(Source: Refine Documentation (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-auto-complete#how-do-i-use-it-with-crud-components-and-useform)) Please ensure that you're using the field.onChange(value) function within the onChange prop of the Autocomplete component. This function is necessary to update the value of the field in the form. If you're still having issues, it might be due to the getList function in your Data Provider. Refine uses the useList hook to do the search and passes it to the search parameter. If there's a problem, you should check your getList function. If you want to change this behavior to make client-side filtering, you can examine this documentation (https://mui.com/material-ui/react-autocomplete/#search-as-you-type). If the problem persists, please provide more details or consider reaching out to the Refine community for more specific help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

absent-sapphire•6mo ago

@kapa.ai My component starts like this

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
    > = ({
        register,
        control,
        formState: { errors },
        refineCore: { onFinish },
        handleSubmit,
        modal: { visible, close },
        saveButtonProps,
    }) => {

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
    > = ({
        register,
        control,
        formState: { errors },
        refineCore: { onFinish },
        handleSubmit,
        modal: { visible, close },
        saveButtonProps,
    }) => {

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the extracts, it seems like you're using a useModalForm component and you want to use Autocomplete within it. Here's a snippet from the documentation that shows how to use Autocomplete with useForm:

import { useAutocomplete } from "@refinedev/mui";  
import { Autocomplete, TextField } from "@mui/material";  
import { Controller } from "react-hook-form";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const CreateOrder: React.FC<UseModalFormReturnType<IOrder, HttpError>> = ({  
 register,  
 control,  
 formState: { errors },  
 refineCore: { onFinish },  
 handleSubmit,  
 modal: { visible, close },  
 saveButtonProps,  
}) => {  
 const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 });  
  
 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <Controller  
 control={control}  
 name="category"  
 rules={{ required: "This field is required" }}  
 render={({ field }) => (  
 <Autocomplete  
 {...autocompleteProps}  
 {...field}  
 onChange={(_, value) => {  
 field.onChange(value);  
 }}  
 getOptionLabel={({ title }) => title}  
 isOptionEqualToValue={(option, value) =>  
 value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()  
 }  
 renderInput={(params) => (  
 <TextField  
 {...params}  
 label="Category"  
 margin="normal"  
 variant="outlined"  
 error={!!errors.category}  
 helperText={errors.category?.message}  
 required  
 />  
 )}  
 />  
 )}  
 />  
 <button type="submit" {...saveButtonProps}>Save</button>  
 </form>  
 );  
};

import { useAutocomplete } from "@refinedev/mui";  
import { Autocomplete, TextField } from "@mui/material";  
import { Controller } from "react-hook-form";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const CreateOrder: React.FC<UseModalFormReturnType<IOrder, HttpError>> = ({  
 register,  
 control,  
 formState: { errors },  
 refineCore: { onFinish },  
 handleSubmit,  
 modal: { visible, close },  
 saveButtonProps,  
}) => {  
 const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 });  
  
 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <Controller  
 control={control}  
 name="category"  
 rules={{ required: "This field is required" }}  
 render={({ field }) => (  
 <Autocomplete  
 {...autocompleteProps}  
 {...field}  
 onChange={(_, value) => {  
 field.onChange(value);  
 }}  
 getOptionLabel={({ title }) => title}  
 isOptionEqualToValue={(option, value) =>  
 value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()  
 }  
 renderInput={(params) => (  
 <TextField  
 {...params}  
 label="Category"  
 margin="normal"  
 variant="outlined"  
 error={!!errors.category}  
 helperText={errors.category?.message}  
 required  
 />  
 )}  
 />  
 )}  
 />  
 <button type="submit" {...saveButtonProps}>Save</button>  
 </form>  
 );  
};

kapa.ai•6mo ago

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