[Autocomplete] Fix selecting undefined on updated options

[jellyedwards]

Hi,

I've implemented changes suggested by @oliviertassinari to fix #18590 and #18456 and put in a test for each too. Both tests fail without the suggested changes, and pass with them.

It's my first PR for MUI so hopefully I haven't missed/messed anything!

Cheers,
John

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

Closes #18590
Closes #18456

[mui-pr-bot]

Details of bundle changes.

Comparing: a5f4a4d...acc2f1c

bundle	Size Change	Size	Gzip Change	Gzip
useAutocomplete	▲ +48 B (+0.39% )	12.4 kB	▲ +6 B (+0.13% )	4.56 kB
@material-ui/lab	▲ +48 B (+0.03% )	173 kB	▲ +5 B (+0.01% )	52.1 kB
Autocomplete	▲ +48 B (+0.04% )	127 kB	▲ +5 B (+0.01% )	39.6 kB
@material-ui/core	--	354 kB	--	96.7 kB
@material-ui/core[umd]	--	311 kB	--	89.6 kB
@material-ui/styles	--	51 kB	--	15.3 kB
@material-ui/system	--	14.8 kB	--	4.06 kB
AppBar	--	62.6 kB	--	19.5 kB
Avatar	--	61.6 kB	--	19.3 kB
Backdrop	--	66.6 kB	--	20.5 kB
Badge	--	64.2 kB	--	19.9 kB
BottomNavigation	--	61.3 kB	--	19.1 kB
BottomNavigationAction	--	74.3 kB	--	23.4 kB
Box	--	69.6 kB	--	21 kB
Breadcrumbs	--	66.9 kB	--	20.9 kB
Button	--	78.3 kB	--	23.9 kB
ButtonBase	--	72.8 kB	--	22.8 kB
ButtonGroup	--	80.9 kB	--	24.8 kB
Card	--	61.6 kB	--	19.2 kB
CardActionArea	--	73.9 kB	--	23.2 kB
CardActions	--	60.9 kB	--	19 kB
CardContent	--	60.9 kB	--	19 kB
CardHeader	--	63.9 kB	--	20 kB
CardMedia	--	61.2 kB	--	19.2 kB
Checkbox	--	80.6 kB	--	25.3 kB
Chip	--	81.4 kB	--	24.8 kB
CircularProgress	--	63 kB	--	19.8 kB
ClickAwayListener	--	3.87 kB	--	1.56 kB
Collapse	--	66.8 kB	--	20.6 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	62 kB	--	19.3 kB
CssBaseline	--	56.4 kB	--	17.6 kB
Dialog	--	81.4 kB	--	25.4 kB
DialogActions	--	61 kB	--	19 kB
DialogContent	--	61.1 kB	--	19.1 kB
DialogContentText	--	62.9 kB	--	19.7 kB
DialogTitle	--	63.1 kB	--	19.7 kB
Divider	--	61.5 kB	--	19.2 kB
docs.landing	--	55.5 kB	--	14.4 kB
docs.main	--	609 kB	--	194 kB
Drawer	--	83.2 kB	--	25.2 kB
ExpansionPanel	--	70.1 kB	--	21.8 kB
ExpansionPanelActions	--	61 kB	--	19 kB
ExpansionPanelDetails	--	60.8 kB	--	19 kB
ExpansionPanelSummary	--	76.9 kB	--	24.2 kB
Fab	--	75.6 kB	--	23.5 kB
Fade	--	22.4 kB	--	7.71 kB
FilledInput	--	72.3 kB	--	22.4 kB
FormControl	--	63.2 kB	--	19.6 kB
FormControlLabel	--	64.4 kB	--	20.1 kB
FormGroup	--	60.9 kB	--	19 kB
FormHelperText	--	62.1 kB	--	19.4 kB
FormLabel	--	62.3 kB	--	19.2 kB
Grid	--	64 kB	--	20 kB
GridList	--	61.4 kB	--	19.2 kB
GridListTile	--	62.6 kB	--	19.5 kB
GridListTileBar	--	62.1 kB	--	19.3 kB
Grow	--	23 kB	--	7.83 kB
Hidden	--	64.8 kB	--	20.3 kB
Icon	--	61.7 kB	--	19.2 kB
IconButton	--	74.9 kB	--	23.3 kB
Input	--	71.3 kB	--	22.1 kB
InputAdornment	--	63.9 kB	--	20 kB
InputBase	--	69.4 kB	--	21.7 kB
InputLabel	--	64.2 kB	--	20 kB
LinearProgress	--	64.2 kB	--	20 kB
Link	--	65.5 kB	--	20.6 kB
List	--	61.2 kB	--	19 kB
ListItem	--	75.9 kB	--	23.6 kB
ListItemAvatar	--	61 kB	--	19 kB
ListItemIcon	--	61.1 kB	--	19 kB
ListItemSecondaryAction	--	60.9 kB	--	19 kB
ListItemText	--	63.8 kB	--	19.9 kB
ListSubheader	--	61.6 kB	--	19.3 kB
Menu	--	87.1 kB	--	26.8 kB
MenuItem	--	77 kB	--	23.9 kB
MenuList	--	64.8 kB	--	20.2 kB
MobileStepper	--	66.6 kB	--	20.8 kB
Modal	--	14.2 kB	--	4.99 kB
NativeSelect	--	75.6 kB	--	23.7 kB
NoSsr	--	2.19 kB	--	1.03 kB
OutlinedInput	--	72.8 kB	--	22.6 kB
Paper	--	61.1 kB	--	19 kB
Popover	--	81.5 kB	--	25.1 kB
Popper	--	28.6 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.29 kB
Radio	--	81.5 kB	--	25.6 kB
RadioGroup	--	62.1 kB	--	19.4 kB
Rating	--	68.9 kB	--	22.1 kB
RootRef	--	4.43 kB	--	1.67 kB
Select	--	113 kB	--	33.5 kB
Skeleton	--	61.4 kB	--	19.3 kB
Slide	--	24.5 kB	--	8.32 kB
Slider	--	74.5 kB	--	23.3 kB
Snackbar	--	76 kB	--	23.7 kB
SnackbarContent	--	64.5 kB	--	20.2 kB
SpeedDial	--	84.9 kB	--	26.7 kB
SpeedDialAction	--	115 kB	--	36.5 kB
SpeedDialIcon	--	63.4 kB	--	19.9 kB
Step	--	61.5 kB	--	19.2 kB
StepButton	--	81.1 kB	--	25.5 kB
StepConnector	--	61.6 kB	--	19.3 kB
StepContent	--	67.9 kB	--	21.2 kB
StepIcon	--	63.5 kB	--	19.7 kB
StepLabel	--	67.5 kB	--	21.1 kB
Stepper	--	63.6 kB	--	20 kB
styles/createMuiTheme	--	15.6 kB	--	5.47 kB
SvgIcon	--	61.9 kB	--	19.3 kB
SwipeableDrawer	--	90.6 kB	--	28 kB
Switch	--	79.9 kB	--	25 kB
Tab	--	75.2 kB	--	23.7 kB
Table	--	61.4 kB	--	19.2 kB
TableBody	--	61 kB	--	19 kB
TableCell	--	62.9 kB	--	19.7 kB
TableFooter	--	61 kB	--	19 kB
TableHead	--	61 kB	--	19 kB
TablePagination	--	140 kB	--	40.7 kB
TableRow	--	61.4 kB	--	19.1 kB
TableSortLabel	--	76.2 kB	--	23.9 kB
Tabs	--	84.3 kB	--	26.5 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	122 kB	--	35.5 kB
ToggleButton	--	75 kB	--	23.7 kB
ToggleButtonGroup	--	62.1 kB	--	19.4 kB
Toolbar	--	61.2 kB	--	19.1 kB
Tooltip	--	99.4 kB	--	31.4 kB
TreeItem	--	72.4 kB	--	22.8 kB
TreeView	--	65.2 kB	--	20.4 kB
Typography	--	62.5 kB	--	19.5 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	22.5 kB	--	7.71 kB

Generated by 🚫 dangerJS against acc2f1c

[oliviertassinari]

@jellyedwards Thanks for the tests! Could you run prettier to fix the build fail? I will have a closer look this evening, I would like to test a bit more extensively the changes.

[merceyz]

Could you run prettier to fix the build fail?

@oliviertassinari @eps1lon Thoughts on running a git hook to do the formatting?
Using these two packages
https://github.com/typicode/husky
https://github.com/azz/pretty-quick

[oliviertassinari]

@merceyz I personally hate git hooks when they are slow. At the same time, this prettier issue comes from time to time (I hit this problem myself, I haven't set up "prettier on save" in my code editor).

[joshwooding]

TIL - When viewing a document, an element with focus is always the active element in the document, but an active element does not necessarily have focus. For example, an active element within a popup window that is not the foreground doesn't have focus.

https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus

[oliviertassinari]

I'm confused by this method. I didn't understand the underlying concept 🙃