[AutoComplete] How to add scroll bar inside the render tags

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

How to add scroll bar inside the autocomplet to avoid too many lines as here:

That question was posted in stack-overflow but had no answers https://stackoverflow.com/questions/59917803/how-to-reduce-the-height-of-autocomplete-component-of-material-ui

(when I added maxWidth and overflow auto it broke the limit tag and broke the location of the search icon

)

Expected Behavior 🤔

Add scrolling option

[hadasmaimon]

@oliviertassinari the problem was: when wrapping renderTags content with div, this causes startAdornment.length to equal 1 instead of number of tags (because the tags are contained within the parent div) As a result, the limit tag does not appear, since more is not >0 (the result is negative)

My solution was: Wrap the tags only on OnOpen

Autocomplete code:

if (limitTags > -1 && Array.isArray(startAdornment)) {
    const more = startAdornment.length - limitTags;
    if (limitTags && !focused && more > 0) {
      startAdornment = startAdornment.splice(0, limitTags);
      startAdornment.push(
        <span className={classes.tag} key={startAdornment.length}>
          {getLimitTagsText(more)}
        </span>,
      );
    }
  }

[martin-trajanovski]

Has this issue been resolved? I’ve been facing the same problem but can’t seem to find a viable solution

@Nishant-Pall you probably need something like this if you want to limit the tags all the time not only when it’s not focused because in the official documentation there is an example with limitTags property but it’s not limiting the tags when input is focused… I am limiting the tags to 1 in my example but you can adjust to your needs.

   renderTags={(value, getTagProps) => {
        const numTags = value.length;
        const limitTags = 1;

        return (
          <>
            {value.slice(0, limitTags).map((option, index) => (
              <Chip
                {...getTagProps({ index })}
                key={index}
                label={option.name}
              />
            ))}

            {numTags > limitTags && ` +${numTags - limitTags}`}
          </>
        );
      }}