How to perform a logic on completion of the useAutoComplete ?

[nareshnepal479]

I am using useAutoComplete to call a couple of services which fetch data from db. Now i have a dropdown that should contain the some filtered values based on a logic obtained from the useAutoComplete calls. I have tried using the logic inside the useEffect but it runs even before useAutoComplete is finished. When i add the autoCompleteProps returned from useAutoComplete as dependency , the useEffect keeps on executing like continuously. can someone help me in getting this work?
Please look for useEffect in the following code snippet

import { Edit, useAutocomplete } from "@refinedev/mui";
import {
  Box,
  Autocomplete,
  TextField,
} from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { useEffect, useState } from "react";

const QuestionEdit = () => {
  const {
    getValues,
    setValue,
    saveButtonProps,
    refineCore: { queryResult },
    register,
    control,
    formState: { errors },
  } = useForm({
    defaultValues: {
      service: { id: "", displayName: "" },
    },
  });

  const { autocompleteProps: serviceAutocompleteProps } = useAutocomplete({
    resource: "services",
  });

  const { autocompleteProps: serviceDetailAutocompleteProps } = useAutocomplete(
    {
      resource: "serviceDetails",
    }
  );

  const questionsData = queryResult?.data?.data;

  useEffect(() => {
    const currentServiceDetailIds = questionsData?.serviceDetails;
    if (!currentServiceDetailIds || currentServiceDetailIds.length == 0) {
      return
    }
    const currentServiceDetail = serviceDetailAutocompleteProps.options?.find(
      (serviceDetail) => {
        return serviceDetail.id == currentServiceDetailIds[0];
      }
    );
    if(!currentServiceDetail){
      return
    }
    const currentService = serviceAutocompleteProps.options?.find(
      (service) => service.id == currentServiceDetail.serviceId
    );

    setValue("service", currentService)
  },[questionsData?.serviceDetails, serviceDetailAutocompleteProps]);
  

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <Controller
          control={control}
          name="service"
          rules={{ required: "This field is required" }}
          defaultValue={{id : "", displayName : ""}}
          render={({ field }) => (
            <Autocomplete
              {...serviceAutocompleteProps}
              {...field}
              onChange={(_, value) => {
                field.onChange(value);
              }}
              getOptionLabel={(item) => {
                return item.displayName;
              }}
              renderInput={(params) => (
                <TextField
                  // sx={{ width: 250 }}
                  {...params}
                  label="Service"
                  margin="normal"
                  variant="outlined"
                  error={!!(errors as any)?.service?.title}
                  helperText={(errors as any)?.service?.title?.message}
                  required
                />
              )}
            />
          )}
        />
      </Box>
    </Edit>
  );
};

export default QuestionEdit;

[alicanerdurmaz]

Are you only using serviceDetailAutocompleteProps.options inside the useEffect? Have you tried adding only serviceDetailAutocompleteProps.options to the dependency array to see if it solves the issue?

    useEffect(() => {
        const currentServiceDetailIds = questionsData?.serviceDetails;
        if (!currentServiceDetailIds || currentServiceDetailIds.length == 0) {
            return;
        }
        const currentServiceDetail =
            serviceDetailAutocompleteProps.options?.find((serviceDetail) => {
                return serviceDetail.id == currentServiceDetailIds[0];
            });
        if (!currentServiceDetail) {
            return;
        }
        const currentService = serviceAutocompleteProps.options?.find(
            (service) => service.id == currentServiceDetail.serviceId,
        );

        setValue("service", currentService);
    }, [questionsData?.serviceDetails, serviceDetailAutocompleteProps.options]);