adverse-sapphire•2y 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•2y 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•2y 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•2y ago

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

adverse-sapphireOP•2y ago

@kapa.ai is there any way to update the autocomplete fields in create page?

kapa.ai•2y 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•2y ago

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

xenial-black•2y ago

are you sending option to backend from new window ?

adverse-sapphireOP•2y 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.

xenial-black•2y 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

adverse-sapphireOP•2y 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

xenial-black•2y 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

adverse-sapphireOP•2y 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.

xenial-black•2y ago

im glad to hear that 🚀