PNSPS-frontend-MaterialUI/src/utils/Combo.js

import {
 Autocomplete, TextField
} from '@mui/material';
import { useState } from 'react';

export default function Combo ({valueName, disabled, form, dataList, filterOptions, getOptionLabel, isOptionEqualToValue, onInputChange, onChange, ...props}){
    const [value, setValue] = useState(form.values[valueName]);
    const [inputValue, setInputValue] = useState("");

    return (
        <Autocomplete
            {...props}
            disablePortal
            fullWidth
            id={valueName}
            name={valueName}
            disabled={disabled}
            value={value}
            inputValue={inputValue}
            filterOptions={filterOptions}
            options={dataList}
            getOptionLabel={getOptionLabel}
            isOptionEqualToValue={(option, newValue)=>{
                if(isOptionEqualToValue)
                    isOptionEqualToValue(option,newValue, setValue,setInputValue )
            }}
            onInputChange={(event, newValue) => {
                setInputValue(newValue);
                if(onInputChange){
                    onInputChange(event,newValue, setInputValue)
                }
            }}
            onChange={(event, newValue) => {
                setValue(newValue);
                if (!onChange){
                    form.setFieldValue(valueName, newValue);
                }else{
                    onChange(event, newValue);
                }
            }}
            sx={{
                "& .MuiInputBase-root": { 
                    height: "41px", 
                    padding: "0px 0px 0px 8px" 
                },
                "& .MuiAutocomplete-endAdornment": { 
                    top: "auto" 
                },
                "& .MuiInputBase-input.Mui-disabled": {
                    WebkitTextFillColor: "#000000",
                    background: "#f8f8f8",
                },
            }}
            renderInput={(params) => <TextField {...params} sx={{
                "& .MuiInputBase-input.Mui-disabled": {
                  WebkitTextFillColor: "#000000",
                  background: "#f8f8f8",
                },
              }}/>}
        />
    );
}