[Autocomplete] Fix option grouping #19121

liangchunn · 2020-01-07T13:11:06Z

Fixes issue where grouping with groupBy doesn't group options together correctly, see

Closes #19109

const data = [
    { group: 1, value: "A" },
    { group: 2, value: "B" },
    { group: 2, value: "C" },
    { group: 1, value: "D" },
    { group: 3, value: "E" },
    { group: 2, value: "F" },
    { group: 1, value: "G" }
]

const groupBy = datum => datum.group

Before fix (this causes rendering of options to misbehave in React):

[ { key: 1, index: 0, options: [ [Object] ] },
  { key: 2, index: 1, options: [ [Object], [Object] ] },
  { key: 1, index: 3, options: [ [Object] ] },
  { key: 3, index: 4, options: [ [Object] ] },
  { key: 2, index: 5, options: [ [Object] ] },
  { key: 1, index: 6, options: [ [Object] ] } ]

After fix:

[ { key: 1, options: [ [Object], [Object], [Object] ], index: 0 },
  { key: 2, options: [ [Object], [Object], [Object] ], index: 3 },
  { key: 3, options: [ [Object] ], index: 6 } ]

Added tests
I have followed (at least) the PR section of the contributing guide.

oliviertassinari · 2020-01-07T13:18:15Z

@liangchunn Thanks, do you think that you could add a new test case?

mui-pr-bot · 2020-01-07T13:21:40Z

Details of bundle changes.

Comparing: c99bd0d...d490f77

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/lab	▲ +79 B (+0.04% )	183 kB	▲ +47 B (+0.09% )	54.9 kB
Autocomplete	▲ +79 B (+0.06% )	130 kB	▲ +46 B (+0.11% )	40.9 kB
useAutocomplete	▲ +79 B (+0.60% )	13.2 kB	▲ +44 B (+0.91% )	4.87 kB
@material-ui/core	--	358 kB	--	98.4 kB
@material-ui/core[umd]	--	314 kB	--	90.8 kB
@material-ui/styles	--	51.3 kB	--	15.4 kB
@material-ui/system	--	14.5 kB	--	4.04 kB
Alert	--	84 kB	--	26.4 kB
AlertTitle	--	64.4 kB	--	20.4 kB
AppBar	--	64.2 kB	--	20.2 kB
Avatar	--	65.5 kB	--	20.7 kB
AvatarGroup	--	62.5 kB	--	19.7 kB
Backdrop	--	68 kB	--	21.1 kB
Badge	--	65.6 kB	--	20.5 kB
BottomNavigation	--	62.7 kB	--	19.7 kB
BottomNavigationAction	--	75.7 kB	--	24 kB
Box	--	71 kB	--	21.7 kB
Breadcrumbs	--	68.2 kB	--	21.5 kB
Button	--	79.9 kB	--	24.6 kB
ButtonBase	--	74.2 kB	--	23.4 kB
ButtonGroup	--	83.4 kB	--	25.6 kB
Card	--	63.1 kB	--	19.8 kB
CardActionArea	--	75.3 kB	--	23.8 kB
CardActions	--	62.3 kB	--	19.6 kB
CardContent	--	62.2 kB	--	19.6 kB
CardHeader	--	65.3 kB	--	20.6 kB
CardMedia	--	62.6 kB	--	19.8 kB
Checkbox	--	82.2 kB	--	26.1 kB
Chip	--	82.8 kB	--	25.5 kB
CircularProgress	--	64.4 kB	--	20.4 kB
ClickAwayListener	--	3.85 kB	--	1.54 kB
Collapse	--	68.1 kB	--	21.2 kB
colorManipulator	--	3.85 kB	--	1.52 kB
Container	--	63.5 kB	--	19.9 kB
CssBaseline	--	57.8 kB	--	18.2 kB
Dialog	--	83 kB	--	26 kB
DialogActions	--	62.3 kB	--	19.6 kB
DialogContent	--	62.5 kB	--	19.7 kB
DialogContentText	--	64.3 kB	--	20.3 kB
DialogTitle	--	64.5 kB	--	20.3 kB
Divider	--	62.8 kB	--	19.8 kB
docs.landing	--	50.9 kB	--	13.5 kB
docs.main	--	614 kB	--	196 kB
Drawer	--	84.7 kB	--	25.9 kB
ExpansionPanel	--	71.6 kB	--	22.5 kB
ExpansionPanelActions	--	62.3 kB	--	19.6 kB
ExpansionPanelDetails	--	62.2 kB	--	19.5 kB
ExpansionPanelSummary	--	78.3 kB	--	24.8 kB
Fab	--	77 kB	--	24.1 kB
Fade	--	23.3 kB	--	8 kB
FilledInput	--	73.8 kB	--	23 kB
FormControl	--	64.6 kB	--	20.2 kB
FormControlLabel	--	65.8 kB	--	20.7 kB
FormGroup	--	62.3 kB	--	19.6 kB
FormHelperText	--	63.5 kB	--	20 kB
FormLabel	--	63.7 kB	--	19.8 kB
Grid	--	65.3 kB	--	20.6 kB
GridList	--	62.7 kB	--	19.8 kB
GridListTile	--	64 kB	--	20.1 kB
GridListTileBar	--	63.5 kB	--	20 kB
Grow	--	23.9 kB	--	8.21 kB
Hidden	--	66.2 kB	--	20.8 kB
Icon	--	63 kB	--	19.8 kB
IconButton	--	76.4 kB	--	23.9 kB
Input	--	72.7 kB	--	22.8 kB
InputAdornment	--	65.3 kB	--	20.6 kB
InputBase	--	70.8 kB	--	22.3 kB
InputLabel	--	65.6 kB	--	20.3 kB
LinearProgress	--	65.6 kB	--	20.5 kB
Link	--	66.8 kB	--	21.2 kB
List	--	62.6 kB	--	19.6 kB
ListItem	--	77.3 kB	--	24.3 kB
ListItemAvatar	--	62.4 kB	--	19.6 kB
ListItemIcon	--	62.4 kB	--	19.6 kB
ListItemSecondaryAction	--	62.3 kB	--	19.6 kB
ListItemText	--	65.2 kB	--	20.6 kB
ListSubheader	--	63 kB	--	19.9 kB
Menu	--	88.7 kB	--	27.4 kB
MenuItem	--	78.4 kB	--	24.6 kB
MenuList	--	66.2 kB	--	20.8 kB
MobileStepper	--	68.1 kB	--	21.4 kB
Modal	--	14.3 kB	--	5.01 kB
NativeSelect	--	77 kB	--	24.4 kB
NoSsr	--	2.19 kB	--	1.03 kB
OutlinedInput	--	74.2 kB	--	23.2 kB
Paper	--	62.6 kB	--	19.6 kB
Popover	--	83 kB	--	25.8 kB
Popper	--	28.7 kB	--	10.3 kB
Portal	--	2.9 kB	--	1.3 kB
Radio	--	83.2 kB	--	26.3 kB
RadioGroup	--	63.7 kB	--	20 kB
Rating	--	70.7 kB	--	22.8 kB
RootRef	--	4.21 kB	--	1.64 kB
Select	--	115 kB	--	34.2 kB
Skeleton	--	63.2 kB	--	20.1 kB
Slide	--	25.3 kB	--	8.72 kB
Slider	--	75.8 kB	--	24.1 kB
Snackbar	--	75.4 kB	--	23.7 kB
SnackbarContent	--	63.8 kB	--	20.2 kB
SpeedDial	--	86.3 kB	--	27.3 kB
SpeedDialAction	--	117 kB	--	37.2 kB
SpeedDialIcon	--	64.8 kB	--	20.4 kB
Step	--	62.9 kB	--	19.8 kB
StepButton	--	82.5 kB	--	26.2 kB
StepConnector	--	63 kB	--	19.9 kB
StepContent	--	69.2 kB	--	21.8 kB
StepIcon	--	64.9 kB	--	20.3 kB
StepLabel	--	68.8 kB	--	21.7 kB
Stepper	--	65.1 kB	--	20.6 kB
styles/createMuiTheme	--	16.5 kB	--	5.85 kB
SvgIcon	--	63.3 kB	--	19.8 kB
SwipeableDrawer	--	92.1 kB	--	28.9 kB
Switch	--	81.4 kB	--	25.7 kB
Tab	--	76.6 kB	--	24.3 kB
Table	--	62.8 kB	--	19.8 kB
TableBody	--	62.4 kB	--	19.6 kB
TableCell	--	64.3 kB	--	20.3 kB
TableContainer	--	62.2 kB	--	19.6 kB
TableFooter	--	62.4 kB	--	19.6 kB
TableHead	--	62.4 kB	--	19.6 kB
TablePagination	--	141 kB	--	41.5 kB
TableRow	--	62.8 kB	--	19.8 kB
TableSortLabel	--	77.6 kB	--	24.5 kB
Tabs	--	85.7 kB	--	27.3 kB
TextareaAutosize	--	5.09 kB	--	2.14 kB
TextField	--	124 kB	--	36.2 kB
ToggleButton	--	76.4 kB	--	24.2 kB
ToggleButtonGroup	--	63.5 kB	--	20 kB
Toolbar	--	62.6 kB	--	19.7 kB
Tooltip	--	101 kB	--	32.1 kB
TreeItem	--	74 kB	--	23.5 kB
TreeView	--	66.6 kB	--	21 kB
Typography	--	63.9 kB	--	20.1 kB
useMediaQuery	--	2.5 kB	--	1.06 kB
Zoom	--	23.4 kB	--	8.11 kB

Generated by 🚫 dangerJS against d490f77

liangchunn · 2020-01-07T14:07:08Z

@oliviertassinari Sure

oliviertassinari · 2020-01-08T08:52:25Z

@liangchunn Thanks

atjeff · 2020-01-08T16:14:10Z

@oliviertassinari any idea when this will be released?

oliviertassinari · 2020-01-08T16:21:07Z

Within a week.

oliviertassinari · 2020-01-08T16:21:59Z

But you can use the codesandbox canary release now (I believe, never tried)

atjeff · 2020-01-08T16:28:02Z

Where can i find information on how to use the canary release?

oliviertassinari · 2020-01-08T16:55:40Z

See https://ci.codesandbox.io/status/mui-org/material-ui/pr/19121/builds/7285

atjeff · 2020-01-08T18:18:26Z

Thank you @oliviertassinari

levrik · 2021-01-15T08:03:02Z

@oliviertassinari I'm a bit confused. This was merged over 1 year ago but I'm still having this issue.
@material-ui/[email protected]

oliviertassinari · 2021-01-15T09:32:50Z

@levrik Test again on v5, we reverted these changes because where breaking the keyboard logic and added a warning instead so developers sort the options before providing them to the Autocomplete.

oliviertassinari changed the title ~~[Autocomplete] Fix option grouping (#19109)~~ [Autocomplete] Fix option grouping Jan 7, 2020

oliviertassinari added scope: autocomplete Changes related to the autocomplete. This includes ComboBox. type: bug It doesn't behave as expected. labels Jan 7, 2020

[Autocomplete] Fix option grouping (mui#19109)

d490f77

liangchunn force-pushed the autocomplete-grouping-fix branch from 53c4e65 to d490f77 Compare January 7, 2020 14:06

oliviertassinari approved these changes Jan 7, 2020

View reviewed changes

oliviertassinari self-assigned this Jan 7, 2020

oliviertassinari added the PR: ready to ship label Jan 7, 2020

oliviertassinari merged commit 1974edd into mui:master Jan 8, 2020

snyk-bot mentioned this pull request Feb 15, 2020

[Snyk] Upgrade @material-ui/core from 4.3.1 to 4.9.0 aubreyyan/1f5374286c#17

Open

This was referenced Feb 23, 2020

[Snyk] Upgrade @material-ui/styles from 4.3.0 to 4.9.0 aubreyyan/1f5374286c#20

Open

[Snyk] Upgrade @material-ui/core from 4.1.1 to 4.9.1 baaahs/sparklemotion#199

Closed

[Snyk] Upgrade @material-ui/core from 4.9.0 to 4.9.1 cybersecmoo/brownie-tub#19

Merged

This was referenced Mar 20, 2020

[Snyk] Upgrade @material-ui/styles from 4.9.0 to 4.9.6 MichaelKohler/health-dashboard#49

Merged

[Snyk] Upgrade @material-ui/styles from 4.9.0 to 4.9.6 MichaelKohler/reps-stats#9

Merged

oliviertassinari mentioned this pull request Apr 1, 2020

[Autocomplete] Go back to the initial groupBy tradeoff #20376

Merged

This was referenced Apr 6, 2020

[Snyk] Upgrade @material-ui/styles from 4.2.1 to 4.9.0 rangle/rangle-type-scale#22

Open

[Snyk] Upgrade @material-ui/styles from 4.9.0 to 4.9.6 cybersecmoo/brownie-tub#51

Closed

This was referenced Apr 16, 2020

[Snyk] Upgrade @material-ui/core from 4.3.3 to 4.9.7 reactioncommerce/reaction#6208

Merged

[Snyk] Upgrade: @material-ui/core, @material-ui/icons BrainBackup/bb8#100

Closed

Nelias mentioned this pull request Jul 28, 2020

[Autocomplete] One has to always sort options array #21967

Closed

2 tasks

Uh oh!

[Autocomplete] Fix option grouping #19121

[Autocomplete] Fix option grouping #19121

Uh oh!

Conversation

liangchunn commented Jan 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oliviertassinari commented Jan 7, 2020

Uh oh!

mui-pr-bot commented Jan 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

liangchunn commented Jan 7, 2020

Uh oh!

oliviertassinari commented Jan 8, 2020

Uh oh!

atjeff commented Jan 8, 2020

Uh oh!

oliviertassinari commented Jan 8, 2020

Uh oh!

oliviertassinari commented Jan 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

atjeff commented Jan 8, 2020

Uh oh!

oliviertassinari commented Jan 8, 2020

Uh oh!

atjeff commented Jan 8, 2020

Uh oh!

levrik commented Jan 15, 2021

Uh oh!

oliviertassinari commented Jan 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

liangchunn commented Jan 7, 2020 •

edited

Loading

mui-pr-bot commented Jan 7, 2020 •

edited

Loading

oliviertassinari commented Jan 8, 2020 •

edited

Loading