Skip to content

Commit 3e8281e

Browse files
ZeeshanTamboliZeeshanTamboli
authored
[Autocomplete] Add ability to render custom single value (#45387)
1 parent 298a604 commit 3e8281e

File tree

19 files changed

+597
-95
lines changed

19 files changed

+597
-95
lines changed

‎docs/data/material/components/autocomplete/CustomSingleValueRendering.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from 'react';
2+
import TextField from '@mui/material/TextField';
3+
import Autocomplete from '@mui/material/Autocomplete';
4+
import Chip from '@mui/material/Chip';
5+
import Stack from '@mui/material/Stack';
6+
7+
export default function CustomSingleValueRendering() {
8+
return (
9+
<Stack spacing={3} sx={{ width: 500 }}>
10+
<Autocomplete
11+
options={top100Films}
12+
getOptionLabel={(option) => option.title}
13+
renderValue={(value, getItemProps) => (
14+
<Chip label={value.title} {...getItemProps()} />
15+
)}
16+
renderInput={(params) => <TextField {...params} label="Movie" />}
17+
/>
18+
<Autocomplete
19+
options={top100Films.map((option) => option.title)}
20+
freeSolo
21+
renderValue={(value, getItemProps) => (
22+
<Chip label={value} {...getItemProps()} />
23+
)}
24+
renderInput={(params) => <TextField {...params} label="freeSolo" />}
25+
/>
26+
</Stack>
27+
);
28+
}
29+
30+
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
31+
const top100Films = [
32+
{ title: 'The Shawshank Redemption', year: 1994 },
33+
{ title: 'The Godfather', year: 1972 },
34+
{ title: 'The Godfather: Part II', year: 1974 },
35+
{ title: 'The Dark Knight', year: 2008 },
36+
{ title: '12 Angry Men', year: 1957 },
37+
{ title: "Schindler's List", year: 1993 },
38+
{ title: 'Pulp Fiction', year: 1994 },
39+
{
40+
title: 'The Lord of the Rings: The Return of the King',
41+
year: 2003,
42+
},
43+
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
44+
{ title: 'Fight Club', year: 1999 },
45+
{
46+
title: 'The Lord of the Rings: The Fellowship of the Ring',
47+
year: 2001,
48+
},
49+
{
50+
title: 'Star Wars: Episode V - The Empire Strikes Back',
51+
year: 1980,
52+
},
53+
{ title: 'Forrest Gump', year: 1994 },
54+
{ title: 'Inception', year: 2010 },
55+
{
56+
title: 'The Lord of the Rings: The Two Towers',
57+
year: 2002,
58+
},
59+
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
60+
{ title: 'Goodfellas', year: 1990 },
61+
{ title: 'The Matrix', year: 1999 },
62+
{ title: 'Seven Samurai', year: 1954 },
63+
{
64+
title: 'Star Wars: Episode IV - A New Hope',
65+
year: 1977,
66+
},
67+
{ title: 'City of God', year: 2002 },
68+
{ title: 'Se7en', year: 1995 },
69+
{ title: 'The Silence of the Lambs', year: 1991 },
70+
{ title: "It's a Wonderful Life", year: 1946 },
71+
{ title: 'Life Is Beautiful', year: 1997 },
72+
{ title: 'The Usual Suspects', year: 1995 },
73+
{ title: 'Léon: The Professional', year: 1994 },
74+
{ title: 'Spirited Away', year: 2001 },
75+
{ title: 'Saving Private Ryan', year: 1998 },
76+
{ title: 'Once Upon a Time in the West', year: 1968 },
77+
{ title: 'American History X', year: 1998 },
78+
{ title: 'Interstellar', year: 2014 },
79+
];

‎docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from 'react';
2+
import TextField from '@mui/material/TextField';
3+
import Autocomplete from '@mui/material/Autocomplete';
4+
import Chip from '@mui/material/Chip';
5+
import Stack from '@mui/material/Stack';
6+
7+
export default function CustomSingleValueRendering() {
8+
return (
9+
<Stack spacing={3} sx={{ width: 500 }}>
10+
<Autocomplete
11+
options={top100Films}
12+
getOptionLabel={(option) => option.title}
13+
renderValue={(value, getItemProps) => (
14+
<Chip label={value.title} {...getItemProps()} />
15+
)}
16+
renderInput={(params) => <TextField {...params} label="Movie" />}
17+
/>
18+
<Autocomplete
19+
options={top100Films.map((option) => option.title)}
20+
freeSolo
21+
renderValue={(value, getItemProps) => (
22+
<Chip label={value} {...getItemProps()} />
23+
)}
24+
renderInput={(params) => <TextField {...params} label="freeSolo" />}
25+
/>
26+
</Stack>
27+
);
28+
}
29+
30+
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
31+
const top100Films = [
32+
{ title: 'The Shawshank Redemption', year: 1994 },
33+
{ title: 'The Godfather', year: 1972 },
34+
{ title: 'The Godfather: Part II', year: 1974 },
35+
{ title: 'The Dark Knight', year: 2008 },
36+
{ title: '12 Angry Men', year: 1957 },
37+
{ title: "Schindler's List", year: 1993 },
38+
{ title: 'Pulp Fiction', year: 1994 },
39+
{
40+
title: 'The Lord of the Rings: The Return of the King',
41+
year: 2003,
42+
},
43+
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
44+
{ title: 'Fight Club', year: 1999 },
45+
{
46+
title: 'The Lord of the Rings: The Fellowship of the Ring',
47+
year: 2001,
48+
},
49+
{
50+
title: 'Star Wars: Episode V - The Empire Strikes Back',
51+
year: 1980,
52+
},
53+
{ title: 'Forrest Gump', year: 1994 },
54+
{ title: 'Inception', year: 2010 },
55+
{
56+
title: 'The Lord of the Rings: The Two Towers',
57+
year: 2002,
58+
},
59+
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
60+
{ title: 'Goodfellas', year: 1990 },
61+
{ title: 'The Matrix', year: 1999 },
62+
{ title: 'Seven Samurai', year: 1954 },
63+
{
64+
title: 'Star Wars: Episode IV - A New Hope',
65+
year: 1977,
66+
},
67+
{ title: 'City of God', year: 2002 },
68+
{ title: 'Se7en', year: 1995 },
69+
{ title: 'The Silence of the Lambs', year: 1991 },
70+
{ title: "It's a Wonderful Life", year: 1946 },
71+
{ title: 'Life Is Beautiful', year: 1997 },
72+
{ title: 'The Usual Suspects', year: 1995 },
73+
{ title: 'Léon: The Professional', year: 1994 },
74+
{ title: 'Spirited Away', year: 2001 },
75+
{ title: 'Saving Private Ryan', year: 1998 },
76+
{ title: 'Once Upon a Time in the West', year: 1968 },
77+
{ title: 'American History X', year: 1998 },
78+
{ title: 'Interstellar', year: 2014 },
79+
];

‎docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx.preview‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<Autocomplete
2+
options={top100Films}
3+
getOptionLabel={(option) => option.title}
4+
renderValue={(value, getItemProps) => (
5+
<Chip label={value.title} {...getItemProps()} />
6+
)}
7+
renderInput={(params) => <TextField {...params} label="Movie" />}
8+
/>
9+
<Autocomplete
10+
options={top100Films.map((option) => option.title)}
11+
freeSolo
12+
renderValue={(value, getItemProps) => (
13+
<Chip label={value} {...getItemProps()} />
14+
)}
15+
renderInput={(params) => <TextField {...params} label="freeSolo" />}
16+
/>

‎docs/data/material/components/autocomplete/FixedTags.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ export default function FixedTags() {
2020
}}
2121
options={top100Films}
2222
getOptionLabel={(option) => option.title}
23-
renderTags={(tagValue, getTagProps) =>
24-
tagValue.map((option, index) => {
25-
const { key, ...tagProps } = getTagProps({ index });
23+
renderValue={(values, getItemProps) =>
24+
values.map((option, index) => {
25+
const { key, ...itemProps } = getItemProps({ index });
2626
return (
2727
<Chip
2828
key={key}
2929
label={option.title}
30-
{...tagProps}
30+
{...itemProps}
3131
disabled={fixedOptions.includes(option)}
3232
/>
3333
);

‎docs/data/material/components/autocomplete/FixedTags.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ export default function FixedTags() {
2020
}}
2121
options={top100Films}
2222
getOptionLabel={(option) => option.title}
23-
renderTags={(tagValue, getTagProps) =>
24-
tagValue.map((option, index) => {
25-
const { key, ...tagProps } = getTagProps({ index });
23+
renderValue={(values, getItemProps) =>
24+
values.map((option, index) => {
25+
const { key, ...itemProps } = getItemProps({ index });
2626
return (
2727
<Chip
2828
key={key}
2929
label={option.title}
30-
{...tagProps}
30+
{...itemProps}
3131
disabled={fixedOptions.includes(option)}
3232
/>
3333
);

‎docs/data/material/components/autocomplete/GitHubLabel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ export default function GitHubLabel() {
212212
setPendingValue(newValue);
213213
}}
214214
disableCloseOnSelect
215-
renderTags={() => null}
215+
renderValue={() => null}
216216
noOptionsText="No labels"
217217
renderOption={(props, option, { selected }) => {
218218
const { key, ...optionProps } = props;

‎docs/data/material/components/autocomplete/GitHubLabel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ export default function GitHubLabel() {
218218
setPendingValue(newValue);
219219
}}
220220
disableCloseOnSelect
221-
renderTags={() => null}
221+
renderValue={() => null}
222222
noOptionsText="No labels"
223223
renderOption={(props, option, { selected }) => {
224224
const { key, ...optionProps } = props;

‎docs/data/material/components/autocomplete/Sizes.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,16 +81,16 @@ export default function Sizes() {
8181
options={top100Films}
8282
getOptionLabel={(option) => option.title}
8383
defaultValue={[top100Films[13]]}
84-
renderTags={(value, getTagProps) =>
85-
value.map((option, index) => {
86-
const { key, ...tagProps } = getTagProps({ index });
84+
renderValue={(values, getItemProps) =>
85+
values.map((option, index) => {
86+
const { key, ...itemProps } = getItemProps({ index });
8787
return (
8888
<Chip
8989
key={key}
9090
variant="outlined"
9191
label={option.title}
9292
size="small"
93-
{...tagProps}
93+
{...itemProps}
9494
/>
9595
);
9696
})

‎docs/data/material/components/autocomplete/Sizes.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,16 +81,16 @@ export default function Sizes() {
8181
options={top100Films}
8282
getOptionLabel={(option) => option.title}
8383
defaultValue={[top100Films[13]]}
84-
renderTags={(value, getTagProps) =>
85-
value.map((option, index) => {
86-
const { key, ...tagProps } = getTagProps({ index });
84+
renderValue={(values, getItemProps) =>
85+
values.map((option, index) => {
86+
const { key, ...itemProps } = getItemProps({ index });
8787
return (
8888
<Chip
8989
key={key}
9090
variant="outlined"
9191
label={option.title}
9292
size="small"
93-
{...tagProps}
93+
{...itemProps}
9494
/>
9595
);
9696
})

‎docs/data/material/components/autocomplete/Tags.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ export default function Tags() {
4343
options={top100Films.map((option) => option.title)}
4444
defaultValue={[top100Films[13].title]}
4545
freeSolo
46-
renderTags={(value, getTagProps) =>
46+
renderValue={(value, getItemProps) =>
4747
value.map((option, index) => {
48-
const { key, ...tagProps } = getTagProps({ index });
48+
const { key, ...itemProps } = getItemProps({ index });
4949
return (
50-
<Chip variant="outlined" label={option} key={key} {...tagProps} />
50+
<Chip variant="outlined" label={option} key={key} {...itemProps} />
5151
);
5252
})
5353
}

0 commit comments

Comments
 (0)