41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { Autocomplete, TextField, TextFieldProps } from '@mui/material';
|
|
import { useState } from 'react';
|
|
import { Controller, useFormContext } from 'react-hook-form';
|
|
|
|
interface IProps {
|
|
options: any[];
|
|
name: string;
|
|
label?: string;
|
|
}
|
|
|
|
export default function RHFAutocomplete({ name, options, label, ...other }: IProps & TextFieldProps) {
|
|
const { control } = useFormContext();
|
|
console.log(control)
|
|
|
|
const [value, setValue] = useState<string | null>(options[0]);
|
|
const [inputValue, setInputValue] = useState('');
|
|
|
|
return (
|
|
<Controller
|
|
name={name}
|
|
control={control}
|
|
render={({ field, fieldState: { error } }) => (
|
|
<Autocomplete
|
|
{...field}
|
|
options={options}
|
|
value={value}
|
|
onChange={(event: any, newValue: string | null) => {
|
|
// console.log('fuck', newValue)
|
|
setValue(newValue.id);
|
|
}}
|
|
inputValue={inputValue}
|
|
onInputChange={(event, newInputValue) => {
|
|
setInputValue(newInputValue);
|
|
}}
|
|
renderInput={(params) => <TextField {...params} label={label ?? name} />}
|
|
{...other}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
} |