Skip to content

Commit 3a64fe1

Browse files
netochavesnetochaves
authored
[Autocomplete] Add limitTags prop (#20209)
1 parent 7e1da61 commit 3a64fe1

File tree

7 files changed

+349
-0
lines changed

7 files changed

+349
-0
lines changed

‎docs/pages/api-docs/autocomplete.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,15 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
4545
| <span class="prop-name">filterSelectedOptions</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hide the selected options from the list box. |
4646
| <span class="prop-name">forcePopupIcon</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;bool</span> | <span class="prop-default">'auto'</span> | Force the visibility display of the popup icon. |
4747
| <span class="prop-name">freeSolo</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. |
48+
| <span class="prop-name">getLimitTagsText</span> | <span class="prop-type">func</span> | <span class="prop-default">(more) => `+${more}`</span> | The label to display when the tags are truncated (`limitTags`).<br><br>**Signature:**<br>`function(more: number) => ReactNode`<br>*more:* The number of truncated tags. |
4849
| <span class="prop-name">getOptionDisabled</span> | <span class="prop-type">func</span> | | Used to determine the disabled state for a given option. |
4950
| <span class="prop-name">getOptionLabel</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). |
5051
| <span class="prop-name">getOptionSelected</span> | <span class="prop-type">func</span> | | Used to determine if an option is selected. Uses strict equality by default. |
5152
| <span class="prop-name">groupBy</span> | <span class="prop-type">func</span> | | If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when `renderGroup` is not provided.<br><br>**Signature:**<br>`function(options: T) => string`<br>*options:* The option to group. |
5253
| <span class="prop-name">id</span> | <span class="prop-type">string</span> | | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. |
5354
| <span class="prop-name">includeInputInList</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the highlight can move to the input. |
5455
| <span class="prop-name">inputValue</span> | <span class="prop-type">string</span> | | The input value. |
56+
| <span class="prop-name">limitTags</span> | <span class="prop-type">number</span> | <span class="prop-default">-1</span> | The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit. |
5557
| <span class="prop-name">ListboxComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'ul'</span> | The component used to render the listbox. |
5658
| <span class="prop-name">ListboxProps</span> | <span class="prop-type">object</span> | | Props applied to the Listbox element. |
5759
| <span class="prop-name">loading</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the component is in a loading state. |

‎docs/src/pages/components/autocomplete/LimitTags.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/* eslint-disable no-use-before-define */
2+
import React from 'react';
3+
import Autocomplete from '@material-ui/lab/Autocomplete';
4+
import { makeStyles } from '@material-ui/core/styles';
5+
import TextField from '@material-ui/core/TextField';
6+
7+
const useStyles = makeStyles((theme) => ({
8+
root: {
9+
width: 500,
10+
'& > * + *': {
11+
marginTop: theme.spacing(3),
12+
},
13+
},
14+
}));
15+
16+
export default function LimitTags() {
17+
const classes = useStyles();
18+
19+
return (
20+
<div className={classes.root}>
21+
<Autocomplete
22+
multiple
23+
limitTags={2}
24+
id="tags-standard"
25+
options={top100Films}
26+
getOptionLabel={(option) => option.title}
27+
defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
28+
renderInput={(params) => (
29+
<TextField {...params} variant="outlined" label="limitTags" placeholder="Favorites" />
30+
)}
31+
/>
32+
</div>
33+
);
34+
}
35+
36+
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
37+
const top100Films = [
38+
{ title: 'The Shawshank Redemption', year: 1994 },
39+
{ title: 'The Godfather', year: 1972 },
40+
{ title: 'The Godfather: Part II', year: 1974 },
41+
{ title: 'The Dark Knight', year: 2008 },
42+
{ title: '12 Angry Men', year: 1957 },
43+
{ title: "Schindler's List", year: 1993 },
44+
{ title: 'Pulp Fiction', year: 1994 },
45+
{ title: 'The Lord of the Rings: The Return of the King', year: 2003 },
46+
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
47+
{ title: 'Fight Club', year: 1999 },
48+
{ title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
49+
{ title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
50+
{ title: 'Forrest Gump', year: 1994 },
51+
{ title: 'Inception', year: 2010 },
52+
{ title: 'The Lord of the Rings: The Two Towers', year: 2002 },
53+
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
54+
{ title: 'Goodfellas', year: 1990 },
55+
{ title: 'The Matrix', year: 1999 },
56+
{ title: 'Seven Samurai', year: 1954 },
57+
{ title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
58+
{ title: 'City of God', year: 2002 },
59+
{ title: 'Se7en', year: 1995 },
60+
{ title: 'The Silence of the Lambs', year: 1991 },
61+
{ title: "It's a Wonderful Life", year: 1946 },
62+
{ title: 'Life Is Beautiful', year: 1997 },
63+
{ title: 'The Usual Suspects', year: 1995 },
64+
{ title: 'Léon: The Professional', year: 1994 },
65+
{ title: 'Spirited Away', year: 2001 },
66+
{ title: 'Saving Private Ryan', year: 1998 },
67+
{ title: 'Once Upon a Time in the West', year: 1968 },
68+
{ title: 'American History X', year: 1998 },
69+
{ title: 'Interstellar', year: 2014 },
70+
{ title: 'Casablanca', year: 1942 },
71+
{ title: 'City Lights', year: 1931 },
72+
{ title: 'Psycho', year: 1960 },
73+
{ title: 'The Green Mile', year: 1999 },
74+
{ title: 'The Intouchables', year: 2011 },
75+
{ title: 'Modern Times', year: 1936 },
76+
{ title: 'Raiders of the Lost Ark', year: 1981 },
77+
{ title: 'Rear Window', year: 1954 },
78+
{ title: 'The Pianist', year: 2002 },
79+
{ title: 'The Departed', year: 2006 },
80+
{ title: 'Terminator 2: Judgment Day', year: 1991 },
81+
{ title: 'Back to the Future', year: 1985 },
82+
{ title: 'Whiplash', year: 2014 },
83+
{ title: 'Gladiator', year: 2000 },
84+
{ title: 'Memento', year: 2000 },
85+
{ title: 'The Prestige', year: 2006 },
86+
{ title: 'The Lion King', year: 1994 },
87+
{ title: 'Apocalypse Now', year: 1979 },
88+
{ title: 'Alien', year: 1979 },
89+
{ title: 'Sunset Boulevard', year: 1950 },
90+
{ title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
91+
{ title: 'The Great Dictator', year: 1940 },
92+
{ title: 'Cinema Paradiso', year: 1988 },
93+
{ title: 'The Lives of Others', year: 2006 },
94+
{ title: 'Grave of the Fireflies', year: 1988 },
95+
{ title: 'Paths of Glory', year: 1957 },
96+
{ title: 'Django Unchained', year: 2012 },
97+
{ title: 'The Shining', year: 1980 },
98+
{ title: 'WALL·E', year: 2008 },
99+
{ title: 'American Beauty', year: 1999 },
100+
{ title: 'The Dark Knight Rises', year: 2012 },
101+
{ title: 'Princess Mononoke', year: 1997 },
102+
{ title: 'Aliens', year: 1986 },
103+
{ title: 'Oldboy', year: 2003 },
104+
{ title: 'Once Upon a Time in America', year: 1984 },
105+
{ title: 'Witness for the Prosecution', year: 1957 },
106+
{ title: 'Das Boot', year: 1981 },
107+
{ title: 'Citizen Kane', year: 1941 },
108+
{ title: 'North by Northwest', year: 1959 },
109+
{ title: 'Vertigo', year: 1958 },
110+
{ title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
111+
{ title: 'Reservoir Dogs', year: 1992 },
112+
{ title: 'Braveheart', year: 1995 },
113+
{ title: 'M', year: 1931 },
114+
{ title: 'Requiem for a Dream', year: 2000 },
115+
{ title: 'Amélie', year: 2001 },
116+
{ title: 'A Clockwork Orange', year: 1971 },
117+
{ title: 'Like Stars on Earth', year: 2007 },
118+
{ title: 'Taxi Driver', year: 1976 },
119+
{ title: 'Lawrence of Arabia', year: 1962 },
120+
{ title: 'Double Indemnity', year: 1944 },
121+
{ title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
122+
{ title: 'Amadeus', year: 1984 },
123+
{ title: 'To Kill a Mockingbird', year: 1962 },
124+
{ title: 'Toy Story 3', year: 2010 },
125+
{ title: 'Logan', year: 2017 },
126+
{ title: 'Full Metal Jacket', year: 1987 },
127+
{ title: 'Dangal', year: 2016 },
128+
{ title: 'The Sting', year: 1973 },
129+
{ title: '2001: A Space Odyssey', year: 1968 },
130+
{ title: "Singin' in the Rain", year: 1952 },
131+
{ title: 'Toy Story', year: 1995 },
132+
{ title: 'Bicycle Thieves', year: 1948 },
133+
{ title: 'The Kid', year: 1921 },
134+
{ title: 'Inglourious Basterds', year: 2009 },
135+
{ title: 'Snatch', year: 2000 },
136+
{ title: '3 Idiots', year: 2009 },
137+
{ title: 'Monty Python and the Holy Grail', year: 1975 },
138+
];

‎docs/src/pages/components/autocomplete/LimitTags.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/* eslint-disable no-use-before-define */
2+
import React from 'react';
3+
import Autocomplete from '@material-ui/lab/Autocomplete';
4+
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
5+
import TextField from '@material-ui/core/TextField';
6+
7+
const useStyles = makeStyles((theme: Theme) =>
8+
createStyles({
9+
root: {
10+
width: 500,
11+
'& > * + *': {
12+
marginTop: theme.spacing(3),
13+
},
14+
},
15+
}),
16+
);
17+
18+
export default function LimitTags() {
19+
const classes = useStyles();
20+
21+
return (
22+
<div className={classes.root}>
23+
<Autocomplete
24+
multiple
25+
limitTags={2}
26+
id="tags-standard"
27+
options={top100Films}
28+
getOptionLabel={(option) => option.title}
29+
defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
30+
renderInput={(params) => (
31+
<TextField {...params} variant="outlined" label="limitTags" placeholder="Favorites" />
32+
)}
33+
/>
34+
</div>
35+
);
36+
}
37+
38+
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
39+
const top100Films = [
40+
{ title: 'The Shawshank Redemption', year: 1994 },
41+
{ title: 'The Godfather', year: 1972 },
42+
{ title: 'The Godfather: Part II', year: 1974 },
43+
{ title: 'The Dark Knight', year: 2008 },
44+
{ title: '12 Angry Men', year: 1957 },
45+
{ title: "Schindler's List", year: 1993 },
46+
{ title: 'Pulp Fiction', year: 1994 },
47+
{ title: 'The Lord of the Rings: The Return of the King', year: 2003 },
48+
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
49+
{ title: 'Fight Club', year: 1999 },
50+
{ title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
51+
{ title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
52+
{ title: 'Forrest Gump', year: 1994 },
53+
{ title: 'Inception', year: 2010 },
54+
{ title: 'The Lord of the Rings: The Two Towers', year: 2002 },
55+
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
56+
{ title: 'Goodfellas', year: 1990 },
57+
{ title: 'The Matrix', year: 1999 },
58+
{ title: 'Seven Samurai', year: 1954 },
59+
{ title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
60+
{ title: 'City of God', year: 2002 },
61+
{ title: 'Se7en', year: 1995 },
62+
{ title: 'The Silence of the Lambs', year: 1991 },
63+
{ title: "It's a Wonderful Life", year: 1946 },
64+
{ title: 'Life Is Beautiful', year: 1997 },
65+
{ title: 'The Usual Suspects', year: 1995 },
66+
{ title: 'Léon: The Professional', year: 1994 },
67+
{ title: 'Spirited Away', year: 2001 },
68+
{ title: 'Saving Private Ryan', year: 1998 },
69+
{ title: 'Once Upon a Time in the West', year: 1968 },
70+
{ title: 'American History X', year: 1998 },
71+
{ title: 'Interstellar', year: 2014 },
72+
{ title: 'Casablanca', year: 1942 },
73+
{ title: 'City Lights', year: 1931 },
74+
{ title: 'Psycho', year: 1960 },
75+
{ title: 'The Green Mile', year: 1999 },
76+
{ title: 'The Intouchables', year: 2011 },
77+
{ title: 'Modern Times', year: 1936 },
78+
{ title: 'Raiders of the Lost Ark', year: 1981 },
79+
{ title: 'Rear Window', year: 1954 },
80+
{ title: 'The Pianist', year: 2002 },
81+
{ title: 'The Departed', year: 2006 },
82+
{ title: 'Terminator 2: Judgment Day', year: 1991 },
83+
{ title: 'Back to the Future', year: 1985 },
84+
{ title: 'Whiplash', year: 2014 },
85+
{ title: 'Gladiator', year: 2000 },
86+
{ title: 'Memento', year: 2000 },
87+
{ title: 'The Prestige', year: 2006 },
88+
{ title: 'The Lion King', year: 1994 },
89+
{ title: 'Apocalypse Now', year: 1979 },
90+
{ title: 'Alien', year: 1979 },
91+
{ title: 'Sunset Boulevard', year: 1950 },
92+
{ title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
93+
{ title: 'The Great Dictator', year: 1940 },
94+
{ title: 'Cinema Paradiso', year: 1988 },
95+
{ title: 'The Lives of Others', year: 2006 },
96+
{ title: 'Grave of the Fireflies', year: 1988 },
97+
{ title: 'Paths of Glory', year: 1957 },
98+
{ title: 'Django Unchained', year: 2012 },
99+
{ title: 'The Shining', year: 1980 },
100+
{ title: 'WALL·E', year: 2008 },
101+
{ title: 'American Beauty', year: 1999 },
102+
{ title: 'The Dark Knight Rises', year: 2012 },
103+
{ title: 'Princess Mononoke', year: 1997 },
104+
{ title: 'Aliens', year: 1986 },
105+
{ title: 'Oldboy', year: 2003 },
106+
{ title: 'Once Upon a Time in America', year: 1984 },
107+
{ title: 'Witness for the Prosecution', year: 1957 },
108+
{ title: 'Das Boot', year: 1981 },
109+
{ title: 'Citizen Kane', year: 1941 },
110+
{ title: 'North by Northwest', year: 1959 },
111+
{ title: 'Vertigo', year: 1958 },
112+
{ title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
113+
{ title: 'Reservoir Dogs', year: 1992 },
114+
{ title: 'Braveheart', year: 1995 },
115+
{ title: 'M', year: 1931 },
116+
{ title: 'Requiem for a Dream', year: 2000 },
117+
{ title: 'Amélie', year: 2001 },
118+
{ title: 'A Clockwork Orange', year: 1971 },
119+
{ title: 'Like Stars on Earth', year: 2007 },
120+
{ title: 'Taxi Driver', year: 1976 },
121+
{ title: 'Lawrence of Arabia', year: 1962 },
122+
{ title: 'Double Indemnity', year: 1944 },
123+
{ title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
124+
{ title: 'Amadeus', year: 1984 },
125+
{ title: 'To Kill a Mockingbird', year: 1962 },
126+
{ title: 'Toy Story 3', year: 2010 },
127+
{ title: 'Logan', year: 2017 },
128+
{ title: 'Full Metal Jacket', year: 1987 },
129+
{ title: 'Dangal', year: 2016 },
130+
{ title: 'The Sting', year: 1973 },
131+
{ title: '2001: A Space Odyssey', year: 1968 },
132+
{ title: "Singin' in the Rain", year: 1952 },
133+
{ title: 'Toy Story', year: 1995 },
134+
{ title: 'Bicycle Thieves', year: 1948 },
135+
{ title: 'The Kid', year: 1921 },
136+
{ title: 'Inglourious Basterds', year: 2009 },
137+
{ title: 'Snatch', year: 2000 },
138+
{ title: '3 Idiots', year: 2009 },
139+
{ title: 'Monty Python and the Holy Grail', year: 1975 },
140+
];

‎docs/src/pages/components/autocomplete/autocomplete.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,12 @@ In the event that you need to lock certain tag so that they can't be removed in
110110

111111
{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}}
112112

113+
### Limit tags
114+
115+
You can use the `limitTags` prop to limit the number of displayed options when not focused.
116+
117+
{{"demo": "pages/components/autocomplete/LimitTags.js"}}
118+
113119
## Sizes
114120

115121
Fancy smaller inputs? Use the `size` prop.

‎packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,13 @@ export interface AutocompleteProps<T>
8383
* Force the visibility display of the popup icon.
8484
*/
8585
forcePopupIcon?: true | false | 'auto';
86+
/**
87+
* The label to display when the tags are truncated (`limitTags`).
88+
*
89+
* @param {number} more The number of truncated tags.
90+
* @returns {ReactNode}
91+
*/
92+
getLimitTagsText?: (more: number) => React.ReactNode;
8693
/**
8794
* The component used to render the listbox.
8895
*/
@@ -101,6 +108,11 @@ export interface AutocompleteProps<T>
101108
* For localization purposes, you can use the provided [translations](/guides/localization/).
102109
*/
103110
loadingText?: React.ReactNode;
111+
/**
112+
* The maximum number of tags that will be visible when not focused.
113+
* Set `-1` to disable the limit.
114+
*/
115+
limitTags?: number;
104116
/**
105117
* Text to display when there are no options.
106118
*

‎packages/material-ui-lab/src/Autocomplete/Autocomplete.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,13 +257,15 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
257257
filterSelectedOptions = false,
258258
forcePopupIcon = 'auto',
259259
freeSolo = false,
260+
getLimitTagsText = (more) => `+${more}`,
260261
getOptionDisabled,
261262
getOptionLabel = (x) => x,
262263
getOptionSelected,
263264
groupBy,
264265
id: idProp,
265266
includeInputInList = false,
266267
inputValue: inputValueProp,
268+
limitTags = -1,
267269
ListboxComponent = 'ul',
268270
ListboxProps,
269271
loading = false,
@@ -340,6 +342,18 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
340342
}
341343
}
342344

345+
if (limitTags > -1 && Array.isArray(startAdornment)) {
346+
const more = startAdornment.length - limitTags;
347+
if (limitTags && !focused && more > 0) {
348+
startAdornment = startAdornment.splice(0, limitTags);
349+
startAdornment.push(
350+
<span className={classes.tag} key={startAdornment.length}>
351+
{getLimitTagsText(more)}
352+
</span>,
353+
);
354+
}
355+
}
356+
343357
const defaultRenderGroup = (params) => (
344358
<li key={params.key}>
345359
<ListSubheader className={classes.groupLabel} component="div">
@@ -592,6 +606,13 @@ Autocomplete.propTypes = {
592606
* If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
593607
*/
594608
freeSolo: PropTypes.bool,
609+
/**
610+
* The label to display when the tags are truncated (`limitTags`).
611+
*
612+
* @param {number} more The number of truncated tags.
613+
* @returns {ReactNode}
614+
*/
615+
getLimitTagsText: PropTypes.func,
595616
/**
596617
* Used to determine the disabled state for a given option.
597618
*/
@@ -627,6 +648,11 @@ Autocomplete.propTypes = {
627648
* The input value.
628649
*/
629650
inputValue: PropTypes.string,
651+
/**
652+
* The maximum number of tags that will be visible when not focused.
653+
* Set `-1` to disable the limit.
654+
*/
655+
limitTags: PropTypes.number,
630656
/**
631657
* The component used to render the listbox.
632658
*/

0 commit comments

Comments
 (0)