MuiAutocomplete narrowing options

Hello, I have troubles to make MuiAutocomplete according to your documentation. In my App it doesn't trigger searching the Autocomplete to narrow options. Thats my code, Its 1-1 from your example where it's working (except the resource name and option label). https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete/#how-do-i-use-it-with-crud-components-and-useform
const { autocompleteProps: platformAutocompleteProps } = useAutocomplete({
resource: "platforms",
});

<Controller
control={control}
name="platform"
render={({ field }) => (
<Autocomplete
{...platformAutocompleteProps}
{...field}
onChange={(_, value) => {
field.onChange(value);
}}
getOptionLabel={({ name }) => name}
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() === (value?.id ?? value)?.toString()
}
renderInput={(params) => (
<TextField
{...params}
label="Platform"
margin="normal"
variant="outlined"
error={!!errors.platform}
helperText={<>{errors.platform?.message}</>}
/>
)}
/>
)}
/>
const { autocompleteProps: platformAutocompleteProps } = useAutocomplete({
resource: "platforms",
});

<Controller
control={control}
name="platform"
render={({ field }) => (
<Autocomplete
{...platformAutocompleteProps}
{...field}
onChange={(_, value) => {
field.onChange(value);
}}
getOptionLabel={({ name }) => name}
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() === (value?.id ?? value)?.toString()
}
renderInput={(params) => (
<TextField
{...params}
label="Platform"
margin="normal"
variant="outlined"
error={!!errors.platform}
helperText={<>{errors.platform?.message}</>}
/>
)}
/>
)}
/>
useAutocomplete | refine
useAutocomplete hook allows you to manage Material UI's `` component when records in a resource needs to be used as select options.
kapa.ai
kapa.ai261d ago
Hi @sensib0i. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- From the information provided, it seems like you're using the useAutocomplete hook correctly. However, there are a few things you might want to check: 1. Data Provider: The useAutocomplete hook uses the getList function from your data provider to fetch the options. Make sure your data provider is set up correctly and the getList function is working as expected. You can check this by logging the output of the getList function. 2. Search Parameter: By default, refine uses the useList hook and passes it to the search parameter. If you're having issues, you should check your getList function in your Data Provider. 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). 3. Resource Name: Ensure that the resource name you're passing to useAutocomplete ("platforms" in your case) matches the one in your data provider. 4. Option Label: The getOptionLabel function should return the label for each option. Make sure the field you're using (name in your case) exists in the data returned by your getList function. If you've checked all of these and you're still having issues, it might be helpful to provide more information about the error you're encountering or any console logs you might have. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai261d ago
<@667849704293269515> kapa.ai is still learning and improving, please let us know how it did by reacting below
other-emerald
other-emerald259d ago
Hello @sensib0i is your problem resolved?
wise-white
wise-white252d ago
Yeah i resolved it. Thank you In your documentation it is not using onSearch but at demo it works Thats why i misunderstood it
More Posts
Inferencer stopped workingI'm unable to use Inferencer. I was using it earlier. I even tried to rollback to the old old versioTSX page format DateField with i18n localeHow on my custom TSX page format DateField with i18n locale? I cannot obtain current i18n locale by In my page strings are not translatedHello i created a page through the inferencer code, now i'm using this code but strings are not tranlist, default pageSizecurrent the pageSize always default to 10, how to change that value?Localize datetime from Strapi dataHello, i used the tool online downloading an example for my project next.js + strapiv4+materialui I VulnerabilityDoes anyone encounters this issues when using refine? marked <=4.0.9 Severity: high Inefficient ReBring Inference autogenerated Code to my pageHello, i used the tool online downloading an example for my project next.js + strapiv4+materialui I How do i set initial value onto useSelect with its label and also value?using useSelect antdesignanyone facing White screen of death whenanyone facing White screen of death when creating a MUI with example pages using vite js?Scroll on mobile with autocompleteHello. I have a small problem when I use autocomplete, when scrolling items on mobile phones, for soDefault query result duplicates the options of select options.Previously I have asked a question regarding how to create a custom option in select input https://dAdd Type to useFormHow do I make the object that I am manipulating, with the help of useForm hook, type safe? For instFreshed downloaded boilerplate app layout messed up on refreshHi, I created and downloaded a fresh app of Next.js + AntD + Custom Auth + RestAPI. When I run it loGoogle OAuth Not WorkingHi all, I have initialised a refine project using React + Vite config, and selected Google OAuth as Trigger AutoSave inside useFieldArrayHow to make use of AutoSave feature? I have implemented table using useFieldArray but it doesn't savhello guys need helphello guys, need help