Material-ui: [Autocomplete] Multiple with many options take too much space

Created on 9 Jan 2020 · 9Comments · Source: mui-org/material-ui

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Currently for an Autocomplete with the multiple option, the height of the autocomplete will grow as more items are selected and more chips are displayed. It would be useful to have an option to limit the number of rows of chips that can be displayed, so that a vertically growing list of chips will not disrupt the layout of the rest of the page.

Examples 🌈

Here is the current behavior from material-ui component demo:
Screen Shot 2020-01-08 at 6 09 34 PM

Here is a design spec for multi-line that has vertical scrolling rather than horizontal (this is actually what we were asked to implement)
Screen Shot 2020-01-08 at 6 17 34 PM

The material design specification on Input Chips has a section labeled "Placement" that indicates that chips can appear in a horizontal scrollable list, which is slightly different but might work for us as well.

https://material.io/components/chips/#input-chips

Motivation 🔦

In our application design we have many multiple select auto complete filter boxes in a grid and we don't want the layout to be disrupted by displaying a lot of chips. We love your new Autocomplete component and this seemed like a useful feature or at least one that would make our designer happy.

Autocomplete enhancement good to take

Source

mzbyszynski

👍8

Most helpful comment

Is it possible to set maximum number of tags that will be visible when focused?

msniezynski on 23 Apr 2020

👍8

All 9 comments

The only approach I have seen related to this problem during my benchmark is:
Capture d’écran 2020-01-11 à 20 03 52
https://garden.zendesk.com/react-components/dropdowns/

oliviertassinari on 11 Jan 2020

👍4

I found a temporary solution.

In your renderInput

 renderInput={ params => {
        const { InputProps, ...restParams } = params;
        const { startAdornment, ...restInputProps } = InputProps;
        return (
          <TextField
            { ...restParams }
            InputProps={ {
              ...restInputProps,
              startAdornment: (
                <div style={ {
                  maxHeight: <INSERT MAX HEIGHT>,
                  overflowY: 'auto',
                } }
                >
                  {startAdornment}
                </div>
              ),
            } }
          />
        );
      } }

Result:

Let me know if this works for you :)

If you found a way to replace maxHeight in px to maxHeight to rowsMax, let me know

Jaskerv on 7 Feb 2020

👍3

Following up on https://github.com/mui-org/material-ui/issues/19137#issuecomment-573345041, I have tried a quick POC, it seems to be good enough. If somebody wants to complete it and open a pull request, it would be awesome.

Capture d’écran 2020-02-22 à 18 13 31

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 463ff0f2f..85f080bc9 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -338,6 +338,14 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
         />
       ));
     }
+
+    const filterMax = 2;
+    const more = startAdornment.length - filterMax;
+
+    if (filterMax && !focused && more > 0) {
+      startAdornment = startAdornment.splice(0, filterMax);
+      startAdornment.push(<span>{`+ ${more} more`}</span>)
+    }
   }

   const defaultRenderGroup = params => (

oliviertassinari on 22 Feb 2020

👍4

Working on this issue.