React js material-ui Autocomplete take the selected element from the renderInput and switch to the InputProps of the textfield

Question

I am trying to use the new version of Autocomplete , I would like to make sure that when an element is selected from the drop-down menu, I would like to modify the input input of the textfield so as to be able to put the chip with the selected text in it.

Is there a way to know in the autocomplete renderInput the selected item? Then pass this information to the textfield's InputProps .

Codesandbox

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import CheckBoxOutlineBlankIcon from "@material-ui/icons/AccessAlarm";
import CheckBoxIcon from "@material-ui/icons/CheckBox";

import { makeStyles, Paper, MenuItem, Chip } from "@material-ui/core";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

export default function CheckboxesTags() {
  return (
    <Autocomplete
      id="checkboxes-tags-demo"
      options={top100Films}
      //disableCloseOnSelect
      getOptionLabel={option => option.title}
      renderOption={(option, { selected }) => (
        <React.Fragment>{option.title}</React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={params => {
        //console.log("params",params)
        return (
          <TextField
            {...params}
            //variant="outlined"
            label="Label"
            placeholder="Placeholder"
            fullWidth
            /*InputProps={{
            startAdornment: params.inputProps.value && params.inputProps["aria-controls"] === null && (
              <Chip
                label={params.inputProps.value}
                style={{
                  backgroundColor: "#007bcc",
                  color: "#fff"
                }}
              />
            )
          }}*/
          />
        );
      }}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: "Pulp Fiction", year: 1994 },
  { title: "The Lord of the Rings: The Return of the King", year: 2003 },
  { title: "The Good, the Bad and the Ugly", year: 1966 },
  { title: "Fight Club", year: 1999 },
  { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },
  { title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 },
  { title: "Forrest Gump", year: 1994 },
  { title: "Inception", year: 2010 },
  { title: "The Lord of the Rings: The Two Towers", year: 2002 },
  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
  { title: "Goodfellas", year: 1990 },
  { title: "The Matrix", year: 1999 },
  { title: "Seven Samurai", year: 1954 },
  { title: "Star Wars: Episode IV - A New Hope", year: 1977 },
  { title: "City of God", year: 2002 },
  { title: "Se7en", year: 1995 },
  { title: "The Silence of the Lambs", year: 1991 },
  { title: "It's a Wonderful Life", year: 1946 },
  { title: "Life Is Beautiful", year: 1997 },
  { title: "The Usual Suspects", year: 1995 },
  { title: "Léon: The Professional", year: 1994 },
  { title: "Spirited Away", year: 2001 },
  { title: "Saving Private Ryan", year: 1998 },
  { title: "Once Upon a Time in the West", year: 1968 },
  { title: "American History X", year: 1998 },
  { title: "Interstellar", year: 2014 }
];

What I wish I could do in the end is such a thing: react-textinput-chip

Answer 1

As far as I can see in the their Customized Autocomplete example you can just use these parameters for the selected item:

renderOption={(option, { selected }) => (...)}

Answer 2

I think you could give a try to renderTags:

renderTags={(tagValue, getTagProps) => {
  return tagValue.map((option, index) => (
    <MyChip {...getTagProps({ index })} label={option.title} />
  ));
 }}