Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Autocomplete] Zero (0) integer key display throws #18994

Merged
merged 2 commits into from
Dec 27, 2019

Conversation

hoop71
Copy link
Contributor

@hoop71 hoop71 commented Dec 27, 2019

Addresses Fixes #18327.

Happy to write some tests here but still getting familiar with the test suite.

@mui-pr-bot
Copy link

mui-pr-bot commented Dec 27, 2019

Details of bundle changes.

Comparing: 50601ce...661a6d4

bundle Size Change Size Gzip Change Gzip
useAutocomplete ▲ +15 B (+0.12% ) 12.6 kB ▲ +5 B (+0.11% ) 4.7 kB
@material-ui/lab ▲ +15 B (+0.01% ) 176 kB ▲ +4 B (+0.01% ) 53.1 kB
Autocomplete ▲ +15 B (+0.01% ) 129 kB ▲ +3 B (+0.01% ) 40.4 kB
@material-ui/core -- 358 kB -- 97.6 kB
@material-ui/core[umd] -- 314 kB -- 90.5 kB
@material-ui/styles -- 50.8 kB -- 15.3 kB
@material-ui/system -- 14.5 kB -- 4.04 kB
AppBar -- 63.6 kB -- 20 kB
Avatar -- 64.9 kB -- 20.5 kB
AvatarGroup -- 62 kB -- 19.5 kB
Backdrop -- 67.4 kB -- 20.9 kB
Badge -- 65 kB -- 20.3 kB
BottomNavigation -- 62.1 kB -- 19.5 kB
BottomNavigationAction -- 75.2 kB -- 23.8 kB
Box -- 70.4 kB -- 21.5 kB
Breadcrumbs -- 67.7 kB -- 21.3 kB
Button -- 79.4 kB -- 24.4 kB
ButtonBase -- 73.6 kB -- 23.2 kB
ButtonGroup -- 82.8 kB -- 25.4 kB
Card -- 62.5 kB -- 19.6 kB
CardActionArea -- 74.7 kB -- 23.6 kB
CardActions -- 61.7 kB -- 19.4 kB
CardContent -- 61.7 kB -- 19.4 kB
CardHeader -- 64.8 kB -- 20.4 kB
CardMedia -- 62 kB -- 19.6 kB
Checkbox -- 81.6 kB -- 25.9 kB
Chip -- 82.2 kB -- 25.2 kB
CircularProgress -- 63.8 kB -- 20.2 kB
ClickAwayListener -- 3.85 kB -- 1.55 kB
Collapse -- 67.6 kB -- 21 kB
colorManipulator -- 3.85 kB -- 1.52 kB
Container -- 62.9 kB -- 19.7 kB
CssBaseline -- 57.3 kB -- 18 kB
Dialog -- 82.4 kB -- 25.8 kB
DialogActions -- 61.8 kB -- 19.4 kB
DialogContent -- 61.9 kB -- 19.5 kB
DialogContentText -- 63.7 kB -- 20.1 kB
DialogTitle -- 64 kB -- 20.1 kB
Divider -- 62.3 kB -- 19.6 kB
docs.landing -- 50.7 kB -- 13.4 kB
docs.main -- 613 kB -- 196 kB
Drawer -- 84.2 kB -- 25.7 kB
ExpansionPanel -- 71.1 kB -- 22.3 kB
ExpansionPanelActions -- 61.8 kB -- 19.4 kB
ExpansionPanelDetails -- 61.6 kB -- 19.4 kB
ExpansionPanelSummary -- 77.8 kB -- 24.6 kB
Fab -- 76.5 kB -- 23.9 kB
Fade -- 23.2 kB -- 7.98 kB
FilledInput -- 73.2 kB -- 22.8 kB
FormControl -- 64.1 kB -- 20 kB
FormControlLabel -- 65.2 kB -- 20.5 kB
FormGroup -- 61.7 kB -- 19.4 kB
FormHelperText -- 63 kB -- 19.8 kB
FormLabel -- 63.1 kB -- 19.6 kB
Grid -- 64.8 kB -- 20.4 kB
GridList -- 62.2 kB -- 19.6 kB
GridListTile -- 63.4 kB -- 19.9 kB
GridListTileBar -- 62.9 kB -- 19.8 kB
Grow -- 23.8 kB -- 8.19 kB
Hidden -- 65.6 kB -- 20.7 kB
Icon -- 62.5 kB -- 19.6 kB
IconButton -- 75.8 kB -- 23.7 kB
Input -- 72.2 kB -- 22.6 kB
InputAdornment -- 64.8 kB -- 20.4 kB
InputBase -- 70.3 kB -- 22.1 kB
InputLabel -- 65 kB -- 20.1 kB
LinearProgress -- 65 kB -- 20.4 kB
Link -- 66.3 kB -- 21.1 kB
List -- 62 kB -- 19.4 kB
ListItem -- 76.8 kB -- 24.1 kB
ListItemAvatar -- 61.8 kB -- 19.4 kB
ListItemIcon -- 61.9 kB -- 19.4 kB
ListItemSecondaryAction -- 61.7 kB -- 19.4 kB
ListItemText -- 64.6 kB -- 20.4 kB
ListSubheader -- 62.4 kB -- 19.7 kB
Menu -- 88.1 kB -- 27.2 kB
MenuItem -- 77.8 kB -- 24.4 kB
MenuList -- 65.7 kB -- 20.6 kB
MobileStepper -- 67.5 kB -- 21.2 kB
Modal -- 14.3 kB -- 5.01 kB
NativeSelect -- 76.5 kB -- 24.2 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 73.7 kB -- 23 kB
Paper -- 62 kB -- 19.4 kB
Popover -- 82.5 kB -- 25.6 kB
Popper -- 28.7 kB -- 10.3 kB
Portal -- 2.9 kB -- 1.3 kB
Radio -- 82.5 kB -- 26.1 kB
RadioGroup -- 62.9 kB -- 19.8 kB
Rating -- 69.7 kB -- 22.5 kB
RootRef -- 4.21 kB -- 1.64 kB
Select -- 114 kB -- 34 kB
Skeleton -- 62.3 kB -- 19.7 kB
Slide -- 25.3 kB -- 8.71 kB
Slider -- 75.3 kB -- 23.9 kB
Snackbar -- 74.8 kB -- 23.4 kB
SnackbarContent -- 63.2 kB -- 20 kB
SpeedDial -- 85.7 kB -- 27.1 kB
SpeedDialAction -- 117 kB -- 37 kB
SpeedDialIcon -- 64.3 kB -- 20.2 kB
Step -- 62.3 kB -- 19.6 kB
StepButton -- 82 kB -- 26 kB
StepConnector -- 62.4 kB -- 19.7 kB
StepContent -- 68.7 kB -- 21.6 kB
StepIcon -- 64.3 kB -- 20.1 kB
StepLabel -- 68.3 kB -- 21.2 kB
Stepper -- 64.6 kB -- 20.4 kB
styles/createMuiTheme -- 16.4 kB -- 5.83 kB
SvgIcon -- 62.7 kB -- 19.6 kB
SwipeableDrawer -- 91.6 kB -- 28.7 kB
Switch -- 80.8 kB -- 25.5 kB
Tab -- 76 kB -- 24.1 kB
Table -- 62.2 kB -- 19.6 kB
TableBody -- 61.8 kB -- 19.4 kB
TableCell -- 63.7 kB -- 20.1 kB
TableContainer -- 61.7 kB -- 19.4 kB
TableFooter -- 61.8 kB -- 19.4 kB
TableHead -- 61.8 kB -- 19.4 kB
TablePagination -- 141 kB -- 41.3 kB
TableRow -- 62.2 kB -- 19.6 kB
TableSortLabel -- 77 kB -- 24.3 kB
Tabs -- 85.1 kB -- 27.1 kB
TextareaAutosize -- 5.09 kB -- 2.14 kB
TextField -- 123 kB -- 36.1 kB
ToggleButton -- 75.8 kB -- 24.1 kB
ToggleButtonGroup -- 62.9 kB -- 19.8 kB
Toolbar -- 62 kB -- 19.6 kB
Tooltip -- 101 kB -- 31.9 kB
TreeItem -- 73.4 kB -- 23.3 kB
TreeView -- 66.1 kB -- 20.8 kB
Typography -- 63.3 kB -- 19.9 kB
useMediaQuery -- 2.5 kB -- 1.05 kB
Zoom -- 23.3 kB -- 8.1 kB

Generated by 🚫 dangerJS against 661a6d4

Copy link
Member

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this. I'll add a test. Once that is done this seems mergable.

@@ -233,7 +233,7 @@ export default function useAutocomplete(props) {
const open = isOpenControlled ? openProp : openState;

const inputValueFilter =
!multiple && value && inputValue === getOptionLabel(value) ? '' : inputValue;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should start linting against these. It's hidden loose equality checking and I think we had like 5-10 issues the last year concerning these. In a typed language this might be ok (if you know the type already is boolean). In a weakly typed language this is dangerous while not improving readability (I'd say it's even worse). The added bytes is negligible.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also remember a few occurrences of this type of bug. It's fascinating to see the length of which the components get battle-tested.

@eps1lon eps1lon added component: autocomplete This is the name of the generic UI component, not the React module! bug 🐛 Something doesn't work PR: needs test The pull request can't be merged labels Dec 27, 2019
@eps1lon eps1lon self-assigned this Dec 27, 2019
@@ -585,7 +587,7 @@ export default function useAutocomplete(props) {
inputRef.current.value.length,
);
}
} else if (freeSolo && inputValueFilter !== '') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Introduced in #18786.

The Enter key shouldn't trigger a new onChange event if its already currently selected.

-- #18344 (comment)

For future reference: Prefer to codify this explicitly rather than communicating this implicitly with a type (here: the empty string). A variable if (inputValueIsSelectedValue === false) is more readable than if (inputValueFilter === '')

Copy link
Member

@oliviertassinari oliviertassinari Dec 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds fair, it will help our future self.

@eps1lon eps1lon added PR: ready to ship and removed PR: needs test The pull request can't be merged labels Dec 27, 2019
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job

@@ -585,7 +587,7 @@ export default function useAutocomplete(props) {
inputRef.current.value.length,
);
}
} else if (freeSolo && inputValueFilter !== '') {
Copy link
Member

@oliviertassinari oliviertassinari Dec 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds fair, it will help our future self.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Autocomplete] Zero (0) integer key display throws
4 participants