autocomplete-mui-not-fixed.tsx

import {
  TextField,
  Autocomplete,
  AutocompleteProps,
  UseAutocompleteProps,
} from "@mui/material";
import React, { memo } from "react";
import { Control, Controller, Path } from "react-hook-form";

type UseAutoCompleteNarrowed<T> = UseAutocompleteProps<
  T,
  undefined,
  undefined,
  undefined
>;

export type HookFormAutoCompleteProps<TFormValues, UAutoComplete> = {
  control: Control<TFormValues, any>;
  name: Path<TFormValues>;
  loading: boolean;
  options: UseAutoCompleteNarrowed<UAutoComplete>["options"];
  getOptionLabel: UseAutoCompleteNarrowed<UAutoComplete>["getOptionLabel"];
  isOptionEqualToValue: UseAutoCompleteNarrowed<UAutoComplete>["isOptionEqualToValue"];
  onInputChange: UseAutoCompleteNarrowed<UAutoComplete>["onInputChange"];
  inputValue: UseAutoCompleteNarrowed<UAutoComplete>["inputValue"];
};

const HookFormAutoComplete = <
  TFormValues extends Record<string, any>,
  UAutoComplete
>(
  props: HookFormAutoCompleteProps<TFormValues, UAutoComplete>
) => {
  const {
    control,
    name,
    loading,
    options,
    getOptionLabel,
    isOptionEqualToValue,
    onInputChange,
    inputValue,
  } = props;

  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, value } }) => (
        <Autocomplete
          value={value}
          onChange={(_evt, newValue) => onChange(newValue)}
          options={options}
          renderInput={params => <TextField {...params} />}
          renderOption={(optionProps, option) => (
            <li {...optionProps} key={JSON.stringify(option)}>
              {getOptionLabel && getOptionLabel(option)}
            </li>
          )}
          getOptionLabel={getOptionLabel}
          isOptionEqualToValue={isOptionEqualToValue}
          loading={loading}
          onInputChange={onInputChange}
          // inputValue={inputValue}
        />
      )}
    />
  );
};

const HookFormAutoCompleteMemo = memo(
  HookFormAutoComplete
) as typeof HookFormAutoComplete;

export { HookFormAutoCompleteMemo as HookFormAutoComplete };