How to get mui Chip value before delete on Autocomplete freeSolo?

user_4941988 0
Viewed 480

I'm working with Autocomplete and Chip component from the mui library. There's the DEMO (standard boilerplate).

I can't get the Chip contents before deleting it:

<Autocomplete
          multiple
          id="tags-filled"
          options={top100Films.map((option) => option.title)}
          defaultValue={[top100Films[1].title]}
          freeSolo
          onKeyDown={(prop) => {
              if (prop.key === 'Enter') {
                  console.log(prop.target.value)
              }
          }} 
          renderTags={(value, getTagProps) =>
              value.map((option, index) => (
                  <Chip
                      onDelete={(s) => console.log("the one", option)}
                      key={index} variant="outlined"
                      label={option} {...getTagProps({ index })} />
              ))
          }
          renderInput={(params) => (
              <TextField
                  {...params}
                  variant="filled"
                  label="freeSolo"
                  placeholder="Favorites"
              />
          )}
      />

The issue is this

renderTags={(value, getTagProps) =>
   value.map((option, index) => (
      <Chip
         onDelete={(s) => console.log("the one", option)}
         key={index} variant="outlined"
         label={option} {...getTagProps({ index })} />
       ))
    }

If I remove {...getTagProps({ index })} I do get the onDelete working the way I need it to but then the actual removal doesn't work. Again, the DEMO here

material-ui reactjs
1 Answers

you can use

onChange={(e, value, situation, option) => {
              if (situation === "removeOption") {

               //write your code here
                console.log("--->", e, value, situation, option);
              }
              setReceivers((state) => value);
            }}

instead of the onDelete like this :

import * as React from "react";
import Chip from "@mui/material/Chip";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";
export default function Tags() {
  const [val, setVal] = React.useState({});
  const [receivers, setReceivers] = React.useState([]);
  console.log(receivers);
  const handleClick = () => {
    setVal(top100Films[0]); //you pass any value from the array of top100Films
    // set value in TextField from dropdown list
  };
  return (
    <Stack spacing={1} sx={{ width: 500 }}>
      <Autocomplete
        multiple
        id="tags-filled"
        options={top100Films.map((option) => option.title)}
        defaultValue={[top100Films[13].title]}
        freeSolo
        onChange={(e, value, situation, option) => {
          if (situation === "removeOption") {
            console.log("--->", e, value, situation, option);
          }
          setReceivers((state) => value);
        }}
        renderTags={(value, getTagProps) =>
          value.map((option, index) => (
            <Chip
              variant="outlined"
              label={option}
              {...getTagProps({ index })}
            />
          ))
        }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="filled"
            label="freeSolo"
            placeholder="Favorites"
          />
        )}
      />
    </Stack>
  );
}

codesandbox

user_129021080
Related