Skip to content

Commit 21c95e7

Browse files
wbtaarongarciah
wbt
and
aarongarciah
authored
[material-ui][Autocomplete] Fix more React 18.3 key spread warnings in demos (#42639)
Signed-off-by: wbt <[email protected]> Co-authored-by: Aarón García Hervás <[email protected]>
1 parent 22be6cf commit 21c95e7

21 files changed

+272
-187
lines changed

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

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,20 @@ export default function CheckboxesTags() {
1616
options={top100Films}
1717
disableCloseOnSelect
1818
getOptionLabel={(option) => option.title}
19-
renderOption={(props, option, { selected }) => (
20-
<li {...props}>
21-
<Checkbox
22-
icon={icon}
23-
checkedIcon={checkedIcon}
24-
style={{ marginRight: 8 }}
25-
checked={selected}
26-
/>
27-
{option.title}
28-
</li>
29-
)}
19+
renderOption={(props, option, { selected }) => {
20+
const { key, ...optionProps } = props;
21+
return (
22+
<li key={key} {...optionProps}>
23+
<Checkbox
24+
icon={icon}
25+
checkedIcon={checkedIcon}
26+
style={{ marginRight: 8 }}
27+
checked={selected}
28+
/>
29+
{option.title}
30+
</li>
31+
);
32+
}}
3033
style={{ width: 500 }}
3134
renderInput={(params) => (
3235
<TextField {...params} label="Checkboxes" placeholder="Favorites" />

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

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,20 @@ export default function CheckboxesTags() {
1616
options={top100Films}
1717
disableCloseOnSelect
1818
getOptionLabel={(option) => option.title}
19-
renderOption={(props, option, { selected }) => (
20-
<li {...props}>
21-
<Checkbox
22-
icon={icon}
23-
checkedIcon={checkedIcon}
24-
style={{ marginRight: 8 }}
25-
checked={selected}
26-
/>
27-
{option.title}
28-
</li>
29-
)}
19+
renderOption={(props, option, { selected }) => {
20+
const { key, ...optionProps } = props;
21+
return (
22+
<li key={key} {...optionProps}>
23+
<Checkbox
24+
icon={icon}
25+
checkedIcon={checkedIcon}
26+
style={{ marginRight: 8 }}
27+
checked={selected}
28+
/>
29+
{option.title}
30+
</li>
31+
);
32+
}}
3033
style={{ width: 500 }}
3134
renderInput={(params) => (
3235
<TextField {...params} label="Checkboxes" placeholder="Favorites" />

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,26 @@ export default function CountrySelect() {
1111
options={countries}
1212
autoHighlight
1313
getOptionLabel={(option) => option.label}
14-
renderOption={(props, option) => (
15-
<Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
16-
<img
17-
loading="lazy"
18-
width="20"
19-
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
20-
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
21-
alt=""
22-
/>
23-
{option.label} ({option.code}) +{option.phone}
24-
</Box>
25-
)}
14+
renderOption={(props, option) => {
15+
const { key, ...optionProps } = props;
16+
return (
17+
<Box
18+
key={key}
19+
component="li"
20+
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
21+
{...optionProps}
22+
>
23+
<img
24+
loading="lazy"
25+
width="20"
26+
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
27+
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
28+
alt=""
29+
/>
30+
{option.label} ({option.code}) +{option.phone}
31+
</Box>
32+
);
33+
}}
2634
renderInput={(params) => (
2735
<TextField
2836
{...params}

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,26 @@ export default function CountrySelect() {
1111
options={countries}
1212
autoHighlight
1313
getOptionLabel={(option) => option.label}
14-
renderOption={(props, option) => (
15-
<Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
16-
<img
17-
loading="lazy"
18-
width="20"
19-
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
20-
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
21-
alt=""
22-
/>
23-
{option.label} ({option.code}) +{option.phone}
24-
</Box>
25-
)}
14+
renderOption={(props, option) => {
15+
const { key, ...optionProps } = props;
16+
return (
17+
<Box
18+
key={key}
19+
component="li"
20+
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
21+
{...optionProps}
22+
>
23+
<img
24+
loading="lazy"
25+
width="20"
26+
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
27+
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
28+
alt=""
29+
/>
30+
{option.label} ({option.code}) +{option.phone}
31+
</Box>
32+
);
33+
}}
2634
renderInput={(params) => (
2735
<TextField
2836
{...params}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,14 @@ export default function FreeSoloCreateOption() {
5656
// Regular option
5757
return option.title;
5858
}}
59-
renderOption={(props, option) => <li {...props}>{option.title}</li>}
59+
renderOption={(props, option) => {
60+
const { key, ...optionProps } = props;
61+
return (
62+
<li key={key} {...optionProps}>
63+
{option.title}
64+
</li>
65+
);
66+
}}
6067
sx={{ width: 300 }}
6168
freeSolo
6269
renderInput={(params) => (

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,14 @@ export default function FreeSoloCreateOption() {
5656
// Regular option
5757
return option.title;
5858
}}
59-
renderOption={(props, option) => <li {...props}>{option.title}</li>}
59+
renderOption={(props, option) => {
60+
const { key, ...optionProps } = props;
61+
return (
62+
<li key={key} {...optionProps}>
63+
{option.title}
64+
</li>
65+
);
66+
}}
6067
sx={{ width: 300 }}
6168
freeSolo
6269
renderInput={(params) => (

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,14 @@ export default function FreeSoloCreateOptionDialog() {
8787
selectOnFocus
8888
clearOnBlur
8989
handleHomeEndKeys
90-
renderOption={(props, option) => <li {...props}>{option.title}</li>}
90+
renderOption={(props, option) => {
91+
const { key, ...optionProps } = props;
92+
return (
93+
<li key={key} {...optionProps}>
94+
{option.title}
95+
</li>
96+
);
97+
}}
9198
sx={{ width: 300 }}
9299
freeSolo
93100
renderInput={(params) => <TextField {...params} label="Free solo dialog" />}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,14 @@ export default function FreeSoloCreateOptionDialog() {
8787
selectOnFocus
8888
clearOnBlur
8989
handleHomeEndKeys
90-
renderOption={(props, option) => <li {...props}>{option.title}</li>}
90+
renderOption={(props, option) => {
91+
const { key, ...optionProps } = props;
92+
return (
93+
<li key={key} {...optionProps}>
94+
{option.title}
95+
</li>
96+
);
97+
}}
9198
sx={{ width: 300 }}
9299
freeSolo
93100
renderInput={(params) => <TextField {...params} label="Free solo dialog" />}

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

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -214,51 +214,54 @@ export default function GitHubLabel() {
214214
disableCloseOnSelect
215215
renderTags={() => null}
216216
noOptionsText="No labels"
217-
renderOption={(props, option, { selected }) => (
218-
<li {...props}>
219-
<Box
220-
component={DoneIcon}
221-
sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
222-
style={{
223-
visibility: selected ? 'visible' : 'hidden',
224-
}}
225-
/>
226-
<Box
227-
component="span"
228-
sx={{
229-
width: 14,
230-
height: 14,
231-
flexShrink: 0,
232-
borderRadius: '3px',
233-
mr: 1,
234-
mt: '2px',
235-
}}
236-
style={{ backgroundColor: option.color }}
237-
/>
238-
<Box
239-
sx={(t) => ({
240-
flexGrow: 1,
241-
'& span': {
242-
color: '#8b949e',
243-
...t.applyStyles('light', {
244-
color: '#586069',
245-
}),
246-
},
247-
})}
248-
>
249-
{option.name}
250-
<br />
251-
<span>{option.description}</span>
252-
</Box>
253-
<Box
254-
component={CloseIcon}
255-
sx={{ opacity: 0.6, width: 18, height: 18 }}
256-
style={{
257-
visibility: selected ? 'visible' : 'hidden',
258-
}}
259-
/>
260-
</li>
261-
)}
217+
renderOption={(props, option, { selected }) => {
218+
const { key, ...optionProps } = props;
219+
return (
220+
<li key={key} {...optionProps}>
221+
<Box
222+
component={DoneIcon}
223+
sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
224+
style={{
225+
visibility: selected ? 'visible' : 'hidden',
226+
}}
227+
/>
228+
<Box
229+
component="span"
230+
sx={{
231+
width: 14,
232+
height: 14,
233+
flexShrink: 0,
234+
borderRadius: '3px',
235+
mr: 1,
236+
mt: '2px',
237+
}}
238+
style={{ backgroundColor: option.color }}
239+
/>
240+
<Box
241+
sx={(t) => ({
242+
flexGrow: 1,
243+
'& span': {
244+
color: '#8b949e',
245+
...t.applyStyles('light', {
246+
color: '#586069',
247+
}),
248+
},
249+
})}
250+
>
251+
{option.name}
252+
<br />
253+
<span>{option.description}</span>
254+
</Box>
255+
<Box
256+
component={CloseIcon}
257+
sx={{ opacity: 0.6, width: 18, height: 18 }}
258+
style={{
259+
visibility: selected ? 'visible' : 'hidden',
260+
}}
261+
/>
262+
</li>
263+
);
264+
}}
262265
options={[...labels].sort((a, b) => {
263266
// Display the selected labels first.
264267
let ai = value.indexOf(a);

0 commit comments

Comments
 (0)