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

[Select] Right click opens select menu #19434

Merged
merged 7 commits into from
Jan 30, 2020
Merged

[Select] Right click opens select menu #19434

merged 7 commits into from
Jan 30, 2020

Conversation

fyodore82
Copy link
Contributor

Close #19250

@mui-pr-bot
Copy link

mui-pr-bot commented Jan 28, 2020

Details of bundle changes.

Comparing: 5c84559...240573b

bundle Size Change Size Gzip Change Gzip
@material-ui/core ▲ +16 B (0.00% ) 360 kB ▲ +5 B (+0.01% ) 98.7 kB
@material-ui/core[umd] ▲ +16 B (+0.01% ) 317 kB ▲ +5 B (+0.01% ) 91.9 kB
Select ▲ +16 B (+0.01% ) 116 kB ▲ +4 B (+0.01% ) 34.6 kB
TablePagination ▲ +16 B (+0.01% ) 143 kB ▲ +3 B (+0.01% ) 41.9 kB
TextField ▲ +16 B (+0.01% ) 125 kB ▲ +2 B (+0.01% ) 36.6 kB
@material-ui/lab -- 185 kB -- 55.2 kB
@material-ui/styles -- 51.2 kB -- 15.4 kB
@material-ui/system -- 14.8 kB -- 4.07 kB
Alert -- 83.8 kB -- 26.3 kB
AlertTitle -- 64.2 kB -- 20.2 kB
AppBar -- 63.9 kB -- 20 kB
Autocomplete -- 132 kB -- 41.3 kB
Avatar -- 65.2 kB -- 20.6 kB
AvatarGroup -- 62.3 kB -- 19.6 kB
Backdrop -- 67.9 kB -- 21 kB
Badge -- 65.3 kB -- 20.4 kB
BottomNavigation -- 62.4 kB -- 19.6 kB
BottomNavigationAction -- 75.6 kB -- 23.9 kB
Box -- 70.9 kB -- 21.6 kB
Breadcrumbs -- 67.8 kB -- 21.3 kB
Button -- 79.8 kB -- 24.5 kB
ButtonBase -- 74 kB -- 23.3 kB
ButtonGroup -- 83.3 kB -- 25.5 kB
Card -- 62.9 kB -- 19.7 kB
CardActionArea -- 75.1 kB -- 23.7 kB
CardActions -- 62 kB -- 19.5 kB
CardContent -- 62 kB -- 19.4 kB
CardHeader -- 65.1 kB -- 20.5 kB
CardMedia -- 62.3 kB -- 19.6 kB
Checkbox -- 83 kB -- 26.3 kB
Chip -- 82.6 kB -- 25.4 kB
CircularProgress -- 64.1 kB -- 20.3 kB
ClickAwayListener -- 3.91 kB -- 1.55 kB
Collapse -- 68 kB -- 21.1 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 63.3 kB -- 19.8 kB
CssBaseline -- 57.5 kB -- 18.1 kB
Dialog -- 83.1 kB -- 25.9 kB
DialogActions -- 62.1 kB -- 19.5 kB
DialogContent -- 62.2 kB -- 19.5 kB
DialogContentText -- 64 kB -- 20.2 kB
DialogTitle -- 64.3 kB -- 20.2 kB
Divider -- 62.6 kB -- 19.7 kB
docs.landing -- 50.5 kB -- 13.2 kB
docs.main -- 595 kB -- 194 kB
Drawer -- 84.8 kB -- 25.8 kB
ExpansionPanel -- 72.3 kB -- 22.7 kB
ExpansionPanelActions -- 62.1 kB -- 19.5 kB
ExpansionPanelDetails -- 61.9 kB -- 19.4 kB
ExpansionPanelSummary -- 78.2 kB -- 24.7 kB
Fab -- 76.9 kB -- 24 kB
Fade -- 23.4 kB -- 7.98 kB
FilledInput -- 73.6 kB -- 22.9 kB
FormControl -- 64.4 kB -- 20.1 kB
FormControlLabel -- 65.5 kB -- 20.6 kB
FormGroup -- 62 kB -- 19.5 kB
FormHelperText -- 63.3 kB -- 19.9 kB
FormLabel -- 63.5 kB -- 19.7 kB
Grid -- 65.1 kB -- 20.4 kB
GridList -- 62.5 kB -- 19.7 kB
GridListTile -- 63.7 kB -- 20 kB
GridListTileBar -- 63.2 kB -- 19.8 kB
Grow -- 24 kB -- 8.19 kB
Hidden -- 66 kB -- 20.7 kB
Icon -- 62.8 kB -- 19.7 kB
IconButton -- 76.2 kB -- 23.8 kB
Input -- 72.5 kB -- 22.7 kB
InputAdornment -- 65.1 kB -- 20.5 kB
InputBase -- 70.6 kB -- 22.2 kB
InputLabel -- 65.3 kB -- 20.2 kB
LinearProgress -- 65.3 kB -- 20.4 kB
Link -- 66.6 kB -- 21.1 kB
List -- 62.4 kB -- 19.5 kB
ListItem -- 77.2 kB -- 24.2 kB
ListItemAvatar -- 62.1 kB -- 19.5 kB
ListItemIcon -- 62.2 kB -- 19.5 kB
ListItemSecondaryAction -- 62 kB -- 19.5 kB
ListItemText -- 65 kB -- 20.4 kB
ListSubheader -- 62.8 kB -- 19.8 kB
Menu -- 88.8 kB -- 27.4 kB
MenuItem -- 78.2 kB -- 24.5 kB
MenuList -- 66 kB -- 20.7 kB
MobileStepper -- 67.8 kB -- 21.3 kB
Modal -- 14.5 kB -- 5.05 kB
NativeSelect -- 76.9 kB -- 24.3 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 74.6 kB -- 23.2 kB
Paper -- 62.4 kB -- 19.5 kB
Popover -- 83.1 kB -- 25.8 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.92 kB -- 1.3 kB
Radio -- 84.1 kB -- 26.5 kB
RadioGroup -- 64.5 kB -- 20 kB
Rating -- 70.5 kB -- 22.7 kB
RootRef -- 4.24 kB -- 1.64 kB
Skeleton -- 62.9 kB -- 19.9 kB
Slide -- 25.5 kB -- 8.71 kB
Slider -- 76.6 kB -- 24.3 kB
Snackbar -- 75.4 kB -- 23.6 kB
SnackbarContent -- 63.5 kB -- 20 kB
SpeedDial -- 86.3 kB -- 27.2 kB
SpeedDialAction -- 118 kB -- 37.5 kB
SpeedDialIcon -- 64.6 kB -- 20.3 kB
Step -- 62.7 kB -- 19.7 kB
StepButton -- 82.4 kB -- 26.1 kB
StepConnector -- 62.7 kB -- 19.8 kB
StepContent -- 69.2 kB -- 21.7 kB
StepIcon -- 64.6 kB -- 20.2 kB
StepLabel -- 68.6 kB -- 21.7 kB
Stepper -- 64.9 kB -- 20.5 kB
styles/createMuiTheme -- 16.5 kB -- 5.81 kB
SvgIcon -- 63 kB -- 19.7 kB
SwipeableDrawer -- 92.3 kB -- 28.9 kB
Switch -- 82.2 kB -- 25.9 kB
Tab -- 76.4 kB -- 24.2 kB
Table -- 62.6 kB -- 19.7 kB
TableBody -- 62.1 kB -- 19.5 kB
TableCell -- 64 kB -- 20.2 kB
TableContainer -- 62 kB -- 19.4 kB
TableFooter -- 62.1 kB -- 19.5 kB
TableHead -- 62.1 kB -- 19.5 kB
TableRow -- 62.5 kB -- 19.6 kB
TableSortLabel -- 77.5 kB -- 24.4 kB
Tabs -- 85.7 kB -- 27.2 kB
TextareaAutosize -- 5.12 kB -- 2.14 kB
ToggleButton -- 76.2 kB -- 24.1 kB
ToggleButtonGroup -- 63.2 kB -- 19.9 kB
Toolbar -- 62.3 kB -- 19.6 kB
Tooltip -- 102 kB -- 32.3 kB
TreeItem -- 74 kB -- 23.4 kB
TreeView -- 66.7 kB -- 21 kB
Typography -- 63.7 kB -- 20 kB
useAutocomplete -- 14.6 kB -- 5.29 kB
useMediaQuery -- 2.51 kB -- 1.06 kB
Zoom -- 23.5 kB -- 8.1 kB

Generated by 🚫 dangerJS against 240573b

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! labels Jan 28, 2020
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 the fix.

However, it is a fundamental feature of the component and not just something that is interesting when integrating with a Dialog. I would rather see this in the corresponding unit test.

@oliviertassinari oliviertassinari added the PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI label Jan 28, 2020
@fyodore82
Copy link
Contributor Author

@eps1lon , please take a look. I've moved the test to UnitTests

@eps1lon eps1lon added PR: ready to ship and removed PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI labels Jan 29, 2020
@@ -105,6 +105,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
};

const handleMouseDown = event => {
if (event.button !== 0)
Copy link
Member

Choose a reason for hiding this comment

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

I'm surprised the CI passes without the bracket. Should we care or ignore it?

Copy link
Member

Choose a reason for hiding this comment

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

no lint complain, no problem

Copy link
Member

Choose a reason for hiding this comment

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

To expand a bit: The point of a common formatting and linting ruleset is to not care about nitpicks in human code reviews. These discussions always slow down development. They can happen but on a per-ruleset basis not for each and every individual case.

Should we care about single-line brackets: Probably (main argument being diff noise here). But then we should change the rules globally.

Copy link
Member

Choose a reason for hiding this comment

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

@eps1lon I couldn't agree more with you

Copy link
Member

@oliviertassinari oliviertassinari Jan 29, 2020

Choose a reason for hiding this comment

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

I had this rule in mind: https://github.com/airbnb/javascript#blocks--braces. If we agree to enforce it globally (I thought we were), I will add it to a backlog of small changes. It's not really important, I think that it could be handled later, like a Friday later afternoon, to rest.

@oliviertassinari oliviertassinari merged commit 15d182c into mui:master Jan 30, 2020
@oliviertassinari
Copy link
Member

Well done!

@Floriferous
Copy link
Contributor

Refactoring all of our unit tests to play nicely with this is really specific to this library, is there a simpler way to trigger the Select with enzyme?

// even before
SelectField.find('[role="button"]').simulate('click');

// before
SelectField.find('[role="button"]').simulate('mousedown');

// now
SelectField.find('[role="button"]').simulate('mousedown', { button: 0 });

@oliviertassinari
Copy link
Member

@Floriferous it's pretty much why we are moving away from enzyme.

@Floriferous
Copy link
Contributor

Floriferous commented Feb 7, 2020

Don't get me wrong, I'd like to switch too, but that's a hard one to prioritize when you have to rewrite all of your tests :)

Alright, we'll keep it like that. It does give us one more reason to push it up the priority list !

@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 7, 2020

Agree, it's a hard tradeoff to make! Maybe you could change your test to simulate the onChange prop call, bypassing the interactions?

@eps1lon
Copy link
Member

eps1lon commented Feb 7, 2020

when you have to rewrite all of your tests :)

I would suggest a different approach here. Add @testing-library/react and only leverage fireEvent at first:

+ import { fireEvent } from '@testing-library/react';
-SelectField.find('[role="button"]').simulate('mousedown');
+fireEvent.mouseDown(SelectField.find('[role="button"]').instance())

This basic case seems like a good candidate for a codemod.

The problem with enzyme is that it does not dispatch a proper event. event.button has to be a short integer. It must never be undefined. You don't have to set the button: 0. 0 is already assumed for the un-initialized value when using the actual constructor of MouseEvent:

The un-initialized value of this attribute MUST be 0.

-- https://www.w3.org/TR/uievents/#dom-mouseevent-button

oliviertassinari added a commit to oliviertassinari/material-ui that referenced this pull request Feb 9, 2020
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: select 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.

Select doesn't respond to click event through code
5 participants