MUI-X autocomplete with TextField turns off cell edition-CodePudding

so basically when I click twice a on cell everything works fine. After I click it second time to be able to input text on the textfield cell stops editing.

I'm able to choose an option tho, so I think issue is in somewhere in the textField, maybe in the renderInput

  const [cars, setCars] = useState<FactionCar[]>([]);
  const [areCarsFetching, setCarsFetching] = useState(false);

  const fetchCars = useCallback(
    debounce(async (searchedCar: string) => {
      setCarsFetching(true);
      if (!searchedCar) {
        setCars([]);
        setCarsFetching(false);
        return;
      }
      const filteredCars = testCars.filter((car) =>
        car.name.toLowerCase().includes(searchedCar.toLowerCase())
      );
      setCars(filteredCars);
      setCarsFetching(false);
    }, 300),
    []
  );

  const SelectEditInputCell = (props: GridRenderCellParams) => {
    return (
      <Autocomplete
        getOptionLabel={(option: FactionCar) => option.name}
        filterOptions={(x) => x}
        options={cars}
        autoComplete
        includeInputInList
        className={styled.AssetList}
        filterSelectedOptions
        loading={areCarsFetching}
        noOptionsText={'No options'}
        onInputChange={(event, value) => fetchCars(value)}
        sx={{ width: '100%', overflow: 'auto', maxHeight: 58 }}
        multiple
        renderInput={(params) => <TextField {...params} variant="outlined" />}
      />
    );
  };

const renderSelectEditInputCell: GridColDef['renderCell'] = (params) => {
    return <SelectEditInputCell {...params} />;
  };

 const columns: GridColDef[] = [
    {
      field: 'allowedVehicles',
      headerName: FactionPanel_Lang.Management_AllowedVehicles,
      width: 400,
      editable: true,
      renderEditCell: renderSelectEditInputCell,
    }
  ]

CodePudding user response：

I think the problem is from not making it controlled input, so you need to add state to handle it

sth like this :

  const [selectedCars,setSelectedCars] = useState()

and add these props:

  <Autocomplete
    value={selectedCars}
    onChange={(_,value)=>setSelectedCars(value)}
    ...

CodePudding user response：

I found an answer on my own Just deleted this part

 const renderSelectEditInputCell: GridColDef['renderCell'] = (params) => {
    return <SelectEditInputCell {...params} />;
  };

so it's like


const SelectEditInputCell = () => {
    return (
      <Autocomplete
        getOptionLabel={(option: FactionCar) => option.name}
        filterOptions={(x) => x}
        options={cars}
        autoComplete
        includeInputInList
        className={styled.AssetList}
        filterSelectedOptions
        loading={areCarsFetching}
        noOptionsText={'No options'}
        onInputChange={(event, value) => fetchCars(value)}
        sx={{ width: '100%', overflow: 'auto', maxHeight: 58 }}
        multiple
        renderInput={(params) => <TextField {...params} variant="outlined" />}
      />
    );
  };


 const columns: GridColDef[] = [
    {
      field: 'allowedVehicles',
      headerName: FactionPanel_Lang.Management_AllowedVehicles,
      width: 400,
      editable: true,
      renderEditCell: SelectEditInputCell,
    }
  ];