Skip to content

Commit ff61ec3

Browse files
github-actions[bot]github-actions[bot]
authored
[material-ui][Autocomplete] Fix more React 18.3 key spread warnings in demos (@wbt) (#42766)
1 parent 476ccd4 commit ff61ec3

21 files changed

+274
-185
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 & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -195,49 +195,54 @@ export default function GitHubLabel() {
195195
PopperComponent={PopperComponent}
196196
renderTags={() => null}
197197
noOptionsText="No labels"
198-
renderOption={(props, option, { selected }) => (
199-
<li {...props}>
200-
<Box
201-
component={DoneIcon}
202-
sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
203-
style={{
204-
visibility: selected ? 'visible' : 'hidden',
205-
}}
206-
/>
207-
<Box
208-
component="span"
209-
sx={{
210-
width: 14,
211-
height: 14,
212-
flexShrink: 0,
213-
borderRadius: '3px',
214-
mr: 1,
215-
mt: '2px',
216-
}}
217-
style={{ backgroundColor: option.color }}
218-
/>
219-
<Box
220-
sx={{
221-
flexGrow: 1,
222-
'& span': {
223-
color:
224-
theme.palette.mode === 'light' ? '#586069' : '#8b949e',
225-
},
226-
}}
227-
>
228-
{option.name}
229-
<br />
230-
<span>{option.description}</span>
231-
</Box>
232-
<Box
233-
component={CloseIcon}
234-
sx={{ opacity: 0.6, width: 18, height: 18 }}
235-
style={{
236-
visibility: selected ? 'visible' : 'hidden',
237-
}}
238-
/>
239-
</li>
240-
)}
198+
renderOption={(props, option, { selected }) => {
199+
const { key, ...optionProps } = props;
200+
return (
201+
<li key={key} {...optionProps}>
202+
<Box
203+
component={DoneIcon}
204+
sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
205+
style={{
206+
visibility: selected ? 'visible' : 'hidden',
207+
}}
208+
/>
209+
<Box
210+
component="span"
211+
sx={{
212+
width: 14,
213+
height: 14,
214+
flexShrink: 0,
215+
borderRadius: '3px',
216+
mr: 1,
217+
mt: '2px',
218+
}}
219+
style={{ backgroundColor: option.color }}
220+
/>
221+
<Box
222+
sx={(t) => ({
223+
flexGrow: 1,
224+
'& span': {
225+
color: '#8b949e',
226+
...t.applyStyles('light', {
227+
color: '#586069',
228+
}),
229+
},
230+
})}
231+
>
232+
{option.name}
233+
<br />
234+
<span>{option.description}</span>
235+
</Box>
236+
<Box
237+
component={CloseIcon}
238+
sx={{ opacity: 0.6, width: 18, height: 18 }}
239+
style={{
240+
visibility: selected ? 'visible' : 'hidden',
241+
}}
242+
/>
243+
</li>
244+
);
245+
}}
241246
options={[...labels].sort((a, b) => {
242247
// Display the selected labels first.
243248
let ai = value.indexOf(a);

0 commit comments

Comments
 (0)