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.

Sign up for GitHub

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

Jump to bottom

[Select] Fix listbox closing on Space keyUp #18754

Merged
merged 2 commits into from
Dec 10, 2019
Merged

[Select] Fix listbox closing on Space keyUp #18754

merged 2 commits into from
Dec 10, 2019

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Dec 9, 2019 •
edited
Loading

A <select> does not select the focused action when a Space keyup event is dispatched.

Includes a fix for ButtonBase ignoring preventDefault for non-native buttons.

Closes #18691

Preview: https://deploy-preview-18754--material-ui.netlify.com/components/selects/

@eps1lon eps1lon added bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! component: ButtonBase The React component. labels Dec 9, 2019
@mui-pr-bot
Copy link

Details of bundle changes.

Comparing: 36f0ce3...783afbf

bundle Size Change Size Gzip Change Gzip
@material-ui/core ▲ +144 B (+0.04% ) 355 kB ▲ +48 B (+0.05% ) 97.1 kB
@material-ui/core[umd] ▲ +144 B (+0.05% ) 312 kB ▲ +46 B (+0.05% ) 90.1 kB
TablePagination ▲ +144 B (+0.10% ) 140 kB ▲ +46 B (+0.11% ) 40.8 kB
Select ▲ +102 B (+0.09% ) 113 kB ▲ +32 B (+0.10% ) 33.5 kB
TextField ▲ +102 B (+0.08% ) 122 kB ▲ +30 B (+0.08% ) 35.5 kB
SpeedDialAction ▲ +42 B (+0.04% ) 116 kB ▲ +16 B (+0.04% ) 36.5 kB
Autocomplete ▲ +42 B (+0.03% ) 127 kB ▲ +15 B (+0.04% ) 39.8 kB
Checkbox ▲ +42 B (+0.05% ) 80.6 kB ▲ +15 B (+0.06% ) 25.4 kB
StepButton ▲ +42 B (+0.05% ) 80.9 kB ▲ +15 B (+0.06% ) 25.5 kB
ButtonBase ▲ +42 B (+0.06% ) 72.6 kB ▲ +13 B (+0.06% ) 22.7 kB
ButtonGroup ▲ +42 B (+0.05% ) 80.7 kB ▲ +13 B (+0.05% ) 24.8 kB
CardActionArea ▲ +42 B (+0.06% ) 73.7 kB ▲ +13 B (+0.06% ) 23.1 kB
Chip ▲ +42 B (+0.05% ) 81.2 kB ▲ +13 B (+0.05% ) 24.8 kB
ExpansionPanelSummary ▲ +42 B (+0.05% ) 76.8 kB ▲ +13 B (+0.05% ) 24.2 kB
Fab ▲ +42 B (+0.06% ) 75.5 kB ▲ +13 B (+0.06% ) 23.4 kB
ListItem ▲ +42 B (+0.06% ) 75.8 kB ▲ +13 B (+0.06% ) 23.6 kB
MenuItem ▲ +42 B (+0.05% ) 76.8 kB ▲ +13 B (+0.05% ) 23.9 kB
SpeedDial ▲ +42 B (+0.05% ) 84.7 kB ▲ +13 B (+0.05% ) 26.7 kB
Switch ▲ +42 B (+0.05% ) 79.8 kB ▲ +13 B (+0.05% ) 25 kB
TableSortLabel ▲ +42 B (+0.06% ) 76 kB ▲ +13 B (+0.05% ) 23.9 kB
Tabs ▲ +42 B (+0.05% ) 84.1 kB ▲ +13 B (+0.05% ) 26.5 kB
@material-ui/lab ▲ +42 B (+0.02% ) 175 kB ▲ +12 B (+0.02% ) 52.4 kB
BottomNavigationAction ▲ +42 B (+0.06% ) 74.1 kB ▲ +12 B (+0.05% ) 23.4 kB
Button ▲ +42 B (+0.05% ) 78.1 kB ▲ +12 B (+0.05% ) 23.9 kB
IconButton ▲ +42 B (+0.06% ) 74.8 kB ▲ +12 B (+0.05% ) 23.3 kB
Radio ▲ +42 B (+0.05% ) 81.5 kB ▲ +12 B (+0.05% ) 25.6 kB
Tab ▲ +42 B (+0.06% ) 75 kB ▲ +12 B (+0.05% ) 23.7 kB
ToggleButton ▲ +42 B (+0.06% ) 74.8 kB ▲ +12 B (+0.05% ) 23.6 kB
docs.main ▲ +42 B (+0.01% ) 609 kB -- 194 kB
@material-ui/styles -- 50.8 kB -- 15.3 kB
@material-ui/system -- 14.5 kB -- 4.03 kB
AppBar -- 62.4 kB -- 19.5 kB
Avatar -- 63.9 kB -- 20.1 kB
AvatarGroup -- 60.9 kB -- 19.1 kB
Backdrop -- 66.4 kB -- 20.5 kB
Badge -- 64 kB -- 19.8 kB
BottomNavigation -- 61.1 kB -- 19.1 kB
Box -- 69.4 kB -- 21 kB
Breadcrumbs -- 66.7 kB -- 20.8 kB
Card -- 61.4 kB -- 19.1 kB
CardActions -- 60.7 kB -- 19 kB
CardContent -- 60.7 kB -- 18.9 kB
CardHeader -- 63.7 kB -- 20 kB
CardMedia -- 61 kB -- 19.1 kB
CircularProgress -- 62.8 kB -- 19.7 kB
ClickAwayListener -- 3.87 kB -- 1.56 kB
Collapse -- 66.6 kB -- 20.6 kB
colorManipulator -- 3.85 kB -- 1.52 kB
Container -- 61.9 kB -- 19.3 kB
CssBaseline -- 56.2 kB -- 17.6 kB
Dialog -- 81.3 kB -- 25.4 kB
DialogActions -- 60.8 kB -- 19 kB
DialogContent -- 60.9 kB -- 19 kB
DialogContentText -- 62.7 kB -- 19.7 kB
DialogTitle -- 63 kB -- 19.7 kB
Divider -- 61.3 kB -- 19.2 kB
docs.landing -- 52.4 kB -- 11.4 kB
Drawer -- 83 kB -- 25.2 kB
ExpansionPanel -- 69.9 kB -- 21.8 kB
ExpansionPanelActions -- 60.8 kB -- 19 kB
ExpansionPanelDetails -- 60.6 kB -- 18.9 kB
Fade -- 22.2 kB -- 7.68 kB
FilledInput -- 72.1 kB -- 22.3 kB
FormControl -- 63.1 kB -- 19.6 kB
FormControlLabel -- 64.2 kB -- 20.1 kB
FormGroup -- 60.7 kB -- 19 kB
FormHelperText -- 61.9 kB -- 19.4 kB
FormLabel -- 62.1 kB -- 19.2 kB
Grid -- 63.8 kB -- 20 kB
GridList -- 61.2 kB -- 19.2 kB
GridListTile -- 62.4 kB -- 19.5 kB
GridListTileBar -- 61.9 kB -- 19.3 kB
Grow -- 22.8 kB -- 7.8 kB
Hidden -- 64.6 kB -- 20.2 kB
Icon -- 61.5 kB -- 19.2 kB
Input -- 71.1 kB -- 22.1 kB
InputAdornment -- 63.8 kB -- 20 kB
InputBase -- 69.2 kB -- 21.6 kB
InputLabel -- 64 kB -- 19.9 kB
LinearProgress -- 64 kB -- 20 kB
Link -- 65.3 kB -- 20.5 kB
List -- 61 kB -- 19 kB
ListItemAvatar -- 60.8 kB -- 19 kB
ListItemIcon -- 60.9 kB -- 19 kB
ListItemSecondaryAction -- 60.7 kB -- 19 kB
ListItemText -- 63.6 kB -- 19.9 kB
ListSubheader -- 61.4 kB -- 19.3 kB
Menu -- 86.9 kB -- 26.7 kB
MenuList -- 64.6 kB -- 20.2 kB
MobileStepper -- 66.4 kB -- 20.8 kB
Modal -- 14.3 kB -- 5 kB
NativeSelect -- 75.4 kB -- 23.7 kB
NoSsr -- 2.19 kB -- 1.03 kB
OutlinedInput -- 72.6 kB -- 22.5 kB
Paper -- 60.9 kB -- 18.9 kB
Popover -- 81.3 kB -- 25.1 kB
Popper -- 28.7 kB -- 10.2 kB
Portal -- 2.9 kB -- 1.3 kB
RadioGroup -- 61.9 kB -- 19.3 kB
Rating -- 68.7 kB -- 22 kB
RootRef -- 4.21 kB -- 1.64 kB
Skeleton -- 61.2 kB -- 19.3 kB
Slide -- 24.3 kB -- 8.3 kB
Slider -- 74.3 kB -- 23.3 kB
Snackbar -- 75.8 kB -- 23.7 kB
SnackbarContent -- 64.3 kB -- 20.2 kB
SpeedDialIcon -- 63.2 kB -- 19.8 kB
Step -- 61.3 kB -- 19.2 kB
StepConnector -- 61.4 kB -- 19.3 kB
StepContent -- 67.7 kB -- 21.1 kB
StepIcon -- 63.3 kB -- 19.7 kB
StepLabel -- 67.3 kB -- 21.1 kB
Stepper -- 63.4 kB -- 19.9 kB
styles/createMuiTheme -- 15.4 kB -- 5.44 kB
SvgIcon -- 61.7 kB -- 19.2 kB
SwipeableDrawer -- 90.4 kB -- 27.9 kB
Table -- 61.2 kB -- 19.2 kB
TableBody -- 60.8 kB -- 19 kB
TableCell -- 62.7 kB -- 19.7 kB
TableFooter -- 60.8 kB -- 19 kB
TableHead -- 60.8 kB -- 19 kB
TableRow -- 61.2 kB -- 19.1 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
ToggleButtonGroup -- 61.9 kB -- 19.4 kB
Toolbar -- 61 kB -- 19.1 kB
Tooltip -- 99.5 kB -- 31.4 kB
TreeItem -- 72.3 kB -- 22.8 kB
TreeView -- 65 kB -- 20.4 kB
Typography -- 62.3 kB -- 19.4 kB
useAutocomplete -- 12.3 kB -- 4.6 kB
useMediaQuery -- 2.47 kB -- 1.04 kB
Zoom -- 22.3 kB -- 7.68 kB

Generated by 🚫 dangerJS against 783afbf

@oliviertassinari
Copy link
Member

Should we be able to select an option, once the select listbox is open, with the Space key?

@oliviertassinari oliviertassinari changed the title Select] Fix listbox closing on Space keyUp [Select] Fix listbox closing on Space keyUp Dec 9, 2019
@eps1lon
Copy link
Member Author

eps1lon commented Dec 10, 2019

Should we be able to select an option, once the select listbox is open, with the Space key?

It's not native behavior either (which is quite lucky because this would've been quite complicated to fix). I already included a comment in case this comes up again: https://github.com/mui-org/material-ui/pull/18754/files#diff-7050430af13b48e8600cbb7534f65796R263

@oliviertassinari
Copy link
Member

It's not native behavior either

So I guess it depends on the platforms. On macOS, you can open the native select and pick an option, all with the space key. I haven't look at how it behaves on Windows and Linux distributions.

@oliviertassinari oliviertassinari merged commit e501325 into mui:master Dec 10, 2019
@oliviertassinari
Copy link
Member

Well done 👍

@eps1lon
Copy link
Member Author

eps1lon commented Dec 11, 2019

So I guess it depends on the platforms.

I hadn't considered that. I guess it's fair to choose the simpler (implementation wise) behavior in that case. One of the reasons why usage of native elements should be preferred.

@oliviertassinari
Copy link
Member

Agree

@oliviertassinari oliviertassinari mentioned this pull request Dec 13, 2019
Closed
2 tasks
@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Feb 15, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Feb 25, 2020
Closed
@oliviertassinari oliviertassinari mentioned this pull request Apr 30, 2021
Open
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes

Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: ButtonBase The React component. component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Select] Opening a focused Select field using the space key does not work as expected
3 participants
@eps1lon @mui-pr-bot @oliviertassinari