[Autocomplete] Fix option grouping

[liangchunn]

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]

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

[mui-pr-bot]

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]

@oliviertassinari Sure

[oliviertassinari]

@liangchunn Thanks

[atjeff]

@oliviertassinari any idea when this will be released?

[oliviertassinari]

Within a week.

[oliviertassinari]

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

[atjeff]

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

[oliviertassinari]

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

[atjeff]

Thank you @oliviertassinari

[levrik]

@oliviertassinari I'm a bit confused. This was merged over 1 year ago but I'm still having this issue.
@material-ui/lab@4.0.0-alpha.57

[oliviertassinari]

@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.