How can I set the placeholder of Autocomplete in a new line?

Question

I'm using Autocomplete of material-ui and I have the list of the selected values and the placeholder in the same area. I would like to set the placeholder in a new line. I'm able to change the style of placeholder using makeStyles but I didn't find a way to going in a new line.

const useStyles = makeStyles ({
  placeholder: {
    "& input::placeholder": {
    display: "block",
  },
}) 

renderInput={(params) => (
  <TextField
    /* eslint-disable react/jsx-props-no-spreading */
    {...params}
    classes={{root: classes.placeholder}}
    label="Selected Options"
    placeholder="Availables Options"
    variant="outlined"
    color="primary"
  />
)

NearHuscarl NearHuscarl · Accepted Answer · 2021-04-14T11:42:15

You can override the renderTags method, add a wrapper component around all selected tags, and set the wrapper width to 100% to push the placeholder element down like this:

<Autocomplete
  multiple
  options={top100Films.map((option) => option.title)}
  renderTags={(value: string[], getTagProps) => (
    <div style={{ width: "100%" }}>
      {value.map((option: string, index: number) => (
        <Chip
          variant="outlined"
          label={option}
          {...getTagProps({ index })}
        />
      ))}
    </div>
  )}
  renderInput={(params) => <TextField {...params} />}
/>

How can I set the placeholder of Autocomplete in a new line?

1 Answers

Live Demo