conventional-tan
conventional-tan12mo ago

refetch autocomplete options

in my create page I'm using an mui autocomplete field. if it has no options to choose, there will show up a button to create an option which will redirect to another create page in a new window. once I submitted in new window it automatically closes and return back to original window. but here, the newly created option is not updated since we used different windows. any solution?
13 Replies
kapa.ai
kapa.ai12mo ago
Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai12mo ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Refine documentation for more information on using MUI Autocomplete with Refine: - Refine MUI Autocomplete Hook (https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete) - Refine MUI Create Component (https://refine.dev/docs/api-reference/mui/components/basic-views/create) - Refine MUI Edit Component (https://refine.dev/docs/api-reference/mui/components/basic-views/edit) These resources might help you find a solution to your problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
useAutocomplete | refine
useAutocomplete hook allows you to manage Material UI `` component when records in a resource needs to be used as select options.
Create | refine
`` provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.
Edit | refine
provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a .
kapa.ai
kapa.ai12mo ago
<@763439201353596968> kapa.ai is still learning and improving, please let us how it did by reacting below
conventional-tan
conventional-tan12mo ago
@kapa.ai is there any way to update the autocomplete fields in create page?
kapa.ai
kapa.ai12mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can update the Autocomplete field in the Create page by using the useAutocomplete hook provided by Refine. The hook fetches data using the useList hook, so when the data is updated, the Autocomplete field will be updated as well. Here's an example of how to use the useAutocomplete hook in a Create page:
import React from "react";
import { Create, useAutocomplete } from "@refinedev/mui";
import { Autocomplete, Box, TextField } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";

const SampleCreate = () => {
const {
saveButtonProps,
refineCore: { formLoading },
register,
control,
formState: { errors },
} = useForm();

const { autocompleteProps: categoryAutocompleteProps } = useAutocomplete({
resource: "categories",
});
return (
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
autoComplete="off"
>
{/* Other form fields */}
<Controller
control={control}
name="category"
rules={{ required: "This field is required" }}
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
{...categoryAutocompleteProps}
{...field}
onChange={(_, value) => {
field.onChange(value);
}}
getOptionLabel={(item) => {
return (
categoryAutocompleteProps?.options?.find(
(p) =>
p?.id?.toString() ===
item?.id?.toString(),
)?.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 as any)?.category?.id}
helperText={
(errors as any)?.category?.id?.message
}
required
/>
)}
/>
)}
/>
</Box>
</Create>
);
};
import React from "react";
import { Create, useAutocomplete } from "@refinedev/mui";
import { Autocomplete, Box, TextField } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";

const SampleCreate = () => {
const {
saveButtonProps,
refineCore: { formLoading },
register,
control,
formState: { errors },
} = useForm();

const { autocompleteProps: categoryAutocompleteProps } = useAutocomplete({
resource: "categories",
});
return (
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
autoComplete="off"
>
{/* Other form fields */}
<Controller
control={control}
name="category"
rules={{ required: "This field is required" }}
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
{...categoryAutocompleteProps}
{...field}
onChange={(_, value) => {
field.onChange(value);
}}
getOptionLabel={(item) => {
return (
categoryAutocompleteProps?.options?.find(
(p) =>
p?.id?.toString() ===
item?.id?.toString(),
)?.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 as any)?.category?.id}
helperText={
(errors as any)?.category?.id?.message
}
required
/>
)}
/>
)}
/>
</Box>
</Create>
);
};
In this example, the useAutocomplete hook is used to fetch data for the "categories" resource. When the data is updated, the Autocomplete field will be updated as well. For more information, refer to the Refine MUI Autocomplete Hook 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
kapa.ai12mo ago
<@763439201353596968> kapa.ai is still learning and improving, please let us how it did by reacting below
distinguished-blush
distinguished-blush12mo ago
are you sending option to backend from new window ?
conventional-tan
conventional-tan12mo ago
No, not like that the usecase is in the old window, my autocomplete is for selecting location, so if there is no location, it will redirect to new window to the create page for location the resource location is used in the old window. now that it is got updated in the new window. but when coming back to old window, it doesn't know that an item is created in this resource.
distinguished-blush
distinguished-blush12mo ago
If i understand correctly, then the question is "in react how can i persist/share sate between diffrent brower pages" this is very specific use case. i didn't tested but i came across this articles. you can try https://www.joshwcomeau.com/react/persisting-react-state-in-localstorage/ https://javascript.plainenglish.io/a-react-hook-to-share-state-between-browser-windows-a672470f66ff
conventional-tan
conventional-tan12mo ago
I mean not persisiting or sharing, I just want my useAutocomplete hook to be refetched again ...when a new new option is created in new window
distinguished-blush
distinguished-blush12mo ago
you are sending to backend in new window, am i right ? then i believe you can use this https://tanstack.com/query/v4/docs/react/guides/window-focus-refetching for useTable you can use this.
useTable({
queryOptions: {
refetchOnWindowFocus: true,
},
});
useTable({
queryOptions: {
refetchOnWindowFocus: true,
},
});
all data hooks has queryOptions prop. you can give this option
conventional-tan
conventional-tan12mo ago
ok let me try this @alicanerdurmaz this does not seems to be working. ok somehow I managed to get a callback to the original when a new item is created in the new window. now I just need to update the useAutoComplete hook to fetch the latest option @alicanerdurmaz given this properly and it worked. really thankful for your help. appreciate it.
distinguished-blush
distinguished-blush12mo ago
im glad to hear that 🚀