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
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
:
(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:
----------------------<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below
harsh-harlequin•7mo ago
@kapa.ai My component starts like this
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
:
(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:
----------------------<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below