Autocomplete is not highlighting the selected value from dropdown and selecting duplicate values

Question

My code for multiple select search dropdown from MUI

This is my API data after converting into desirable format (transformedSubLocationData) value

0: {label: 'Dialed Number 1', value: '0'}
1: {label: 'Dialed Number 2', value: '1'}
2: {label: 'Dialed Number 3', value: '2'}
3: {label: 'Dialed Number 4', value: '3'}
length: 4
            
                const [selectedNames, setSelectedNames] = useState([]);
                
                if(locationSubValue[formData.location.value] !== undefined){
                  // Transforming the sub location array into the required format
                  transformedSubLocationData = locationSubValue[formData.location.value].map((label, index) => ({
                    label,
                    value: index.toString()  // You can use the index as the value or any unique identifier
                  }));
                }
                
                <Autocomplete
                multiple
                id="fixed-tags-demo"
                value={selectedNames}
                onChange={(event, newValue) => {setSelectedNames([...newValue.filter((option) => option)]); changeHandleLocationErrorRemove(event)}}
                options={transformedSubLocationData}
                getOptionLabel={(option) => option.label}
                renderTags={(tagValue, getTagProps) =>
                  tagValue.map((option, index) => (
                    <Chip
                      label={option.label}
                      {...getTagProps({ index })}                      
                    />                    
                  ))                  
                }                
                style={{ width: 500 }}
                renderInput={(params) => (
                  <TextField {...params} label={formData.location.value} placeholder={formData.location.value} />                  
                )}                
            />

This is my code everything is same but in material UI site it is working but when the same code I copied to my JS file it stops working. Please help as it is pending since long, didn't find any solution. Let me know what is wrong with this code.

Answer 1

I am not sure what your formData value is in TextField. But the issue is that you don't have to do the filer in onChange, the newValue has updated values as an array. You can just set newValue in selectedNames.

Also, you might get an warning for selected option check, to fix it i added a custom comparison method in isOptionEqualToValue prop.

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

export default App = () => {
  const [selectedNames, setSelectedNames] = useState([]);
  const transformedSubLocationData = [
    { label: "Dialed Number 1", value: "0" },
    { label: "Dialed Number 2", value: "1" },
    { label: "Dialed Number 3", value: "2" },
    { label: "Dialed Number 4", value: "3" },
  ];
  return (
    <div>
      <Autocomplete
        multiple
        id="fixed-tags-demo"
        value={selectedNames}
        onChange={(event, newValue) => {
          setSelectedNames(newValue);
        }}
        options={transformedSubLocationData}
        getOptionLabel={(option) => option.label}
        renderTags={(tagValue, getTagProps) =>
          tagValue.map((option, index) => (
            <Chip label={option.label} {...getTagProps({ index })} />
          ))
        }
        style={{ width: 500 }}
        renderInput={(params) => <TextField {...params} />}
        isOptionEqualToValue={(option, value) => {
          return option.value === value.value;
        }}
      />
    </div>
  );
};

Edit: In case the value property in transformedSubLocationData is just for data creation purpose then you can skip it. You can just pass array of string to make it work. This eliminates adding isOptionEqualToValue.

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

export default App = () => {
  const [selectedNames, setSelectedNames] = useState([]);
  const transformedSubLocationData = [
    "Dialed Number 1",
    "Dialed Number 2",
    "Dialed Number 3",
    "Dialed Number 4",
  ];
  return (
    <div>
      <Autocomplete
        multiple
        id="fixed-tags-demo"
        value={selectedNames}
        onChange={(event, newValue) => {
          setSelectedNames(newValue);
        }}
        options={transformedSubLocationData}
        renderTags={(tagValue, getTagProps) =>
          tagValue.map((option, index) => (
            <Chip label={option} {...getTagProps({ index })} />
          ))
        }
        style={{ width: 500 }}
        renderInput={(params) => <TextField {...params} />}
      />
    </div>
  );
};

I removed getOptionLabel, isOptionEqualToValue. In Chip, the label prop just takes option.