Material-ui Autocomplete: Add a value to startAdornment

Question

I have autocomplete with multiple selection permission.

https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.js

In the example I have 3 options for cities. How can I manually add automatic added value in TextField when something is selected?

In other words here:

 renderInput={(params) => {
        console.log(params);
        return (
          <TextField
            {...params}
            variant="outlined"
            label="Cities"
            placeholder="Enter cities"
            autoComplete="off"
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <React.Fragment>
                  {params.InputProps.endAdornment}
                </React.Fragment>
              )
            }}
          />
        );
  }}

I want to be able to add to params.InputProps.startAdornment a value before rendering the textfield.

as every selected object seems to be very complex object, how I can do this manually(It is too complicated to push())? Any ideas how I can add object like this:

manually?

Answer 1

The other solution didn't work 100% from myside,
As it adds the automatic field,
But new selected options -> are selected but chips not showing next to the automatic added option!!

So to fix this problem I made a few changes:

<TextField
    {...params}
    variant="outlined"
    label="Cities"
    placeholder="Enter cities"
    autoComplete="off"
    InputProps={{
      ...params.InputProps,
    startAdornment: (
              <>
                <Chip
                 key={"manual"}
                 tabIndex={-1}
                 label={"manually added"}
                 className={classes.chip}
                 onDelete={handleDelete("blah")}
                 deleteIcon // requires onDelete function to work
                />
                <React.Fragment> //the change
                  {" "}
                  {params.InputProps.startAdornment}{" "}. //the change
                </React.Fragment>
              </>
            ),
          }}
      endAdornment: (
        <React.Fragment>
          {params.InputProps.endAdornment}
        </React.Fragment>
      )
    }}
  />

Answer 2

the value of startAdornment is undefined until a value is chosen from the dropdown/checkbox. So, you could add startAdornment property to the InputProps like below,

import { Chip } from '@material-ui/core';
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  chip: {
    margin: theme.spacing(0.5, 0.25)
  }
}));

const classes = useStyles();

const handleDelete = (item) => () => {...};

 renderInput={(params) => {
    console.log(params);
    return (
      <TextField
        {...params}
        variant="outlined"
        label="Cities"
        placeholder="Enter cities"
        autoComplete="off"
        InputProps={{
          ...params.InputProps,
          startAdornment: (
            <Chip
              key={"manual"}
              tabIndex={-1}
              label={"manually added"}
              className={classes.chip}
              onDelete={handleDelete("blah")}
              deleteIcon // requires onDelete function to work
            />
          ),
          endAdornment: (
            <React.Fragment>
              {params.InputProps.endAdornment}
            </React.Fragment>
          )
        }}
      />
    );
  }}