Using renderOption in MUI's AutoComplete-CodePudding

Today I come to you with a question that has been bugging me this past few days or so.

I am trying to make it so my autocomplete shows a label in the option, but the value is different. And so I googled around and found out you can do it with renderOption. So I tried renderOption and I can't get it to work at all, and it's throwing me a error that I do not understand.

My code below:

    const itemList = [
        { value: "Car Winner", id: "casinofob" },
        { value: "PD 556", id: "-2084633992" },
        { value: "Cluckin Drink", id: "cbdrink" },
        { value: "Blink", id: "spellbook-blink" },
    ];

                        <Autocomplete
                          disablePortal
                          id="combo-box-demo"
                          options={itemList}
                          renderOption={option => <>{option.value}</>}
                          getOptionLabel={(option) => option.id}
                          sx={{ width: 300 }}
                          renderInput={(params) => <TextField onChange={updateSpawnEnteredItem} label="Item Name" sx={{marginBottom: '15px', marginTop:'5px', width: 300 }} {...params} />}
                    />

The error I am getting is as follows: "Property 'value' does not exist on type 'HTMLAttributes'

If anyone can help me solve this error, I'd be eternally grateful since I've had this problem for days now.

Regards.

CodePudding user response：

Your actual "Labels" that you would like to show up as list options are named value which is quite confusing in this scenario. You should specify option.value in the getOptionLabel prop. Also, move the onChange handler one level up as it's the responsibility of the AutoComplete component. This example is using Mui v5.3

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

interface Item {
  value: string;
  id: string;
}
export default function ComboBox() {
  const itemList: Item[] = [
    { value: "Car Winner", id: "casinofob" },
    { value: "PD 556", id: "-2084633992" },
    { value: "Cluckin Drink", id: "cbdrink" },
    { value: "Blink", id: "spellbook-blink" }
  ];

  const onChange = (
    _event: React.SyntheticEvent<Element, Event>,
    value: Item
  ) => {
    console.log("value is:", value?.id);
  };

  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={itemList}
      sx={{ width: 300 }}
      getOptionLabel={(option) => option.value}
      isOptionEqualToValue={(option, value) => option.id === value.id}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Item Name"
          sx={{ marginBottom: "15px", marginTop: "5px", width: 300 }}
        />
      )}
      onChange={onChange}
    />
  );
}

Here is a working code sandbox: https://codesandbox.io/s/combobox-material-demo-forked-yvzer?file=/demo.tsx

CodePudding user response：

The signature of renderOption is incorrect in your code. To render option.value, try the code below:

<Autocomplete
  renderOption={(props, options) => <>{option.value}</>}
/>

Source: renderOption - Autocomplete API