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] Improve response, react to mouse down #17978

Merged
merged 7 commits into from
Nov 23, 2019

Conversation

SarthakC
Copy link
Contributor

resolves #8999

@mui-pr-bot
Copy link

mui-pr-bot commented Oct 21, 2019

Details of bundle changes.

Comparing: 197b69c...5018f21

bundle Size Change Size Gzip Change Gzip
Select ▲ +33 B (+0.03% ) 113 kB ▲ +13 B (+0.04% ) 33.5 kB
TablePagination ▲ +33 B (+0.02% ) 139 kB ▲ +12 B (+0.03% ) 40.7 kB
TextField ▲ +33 B (+0.03% ) 122 kB ▲ +12 B (+0.03% ) 35.5 kB
@material-ui/core ▲ +33 B (+0.01% ) 351 kB ▲ +7 B (+0.01% ) 96.1 kB
@material-ui/core[umd] ▲ +33 B (+0.01% ) 310 kB ▲ +5 B (+0.01% ) 89.4 kB
@material-ui/lab -- 172 kB -- 51.9 kB
@material-ui/styles -- 50.8 kB -- 15.4 kB
@material-ui/system -- 14.8 kB -- 4.06 kB
AppBar -- 62.4 kB -- 19.5 kB
Autocomplete -- 126 kB -- 40 kB
Avatar -- 61.4 kB -- 19.3 kB
Backdrop -- 66.4 kB -- 20.5 kB
Badge -- 64 kB -- 19.8 kB
BottomNavigation -- 61 kB -- 19.1 kB
BottomNavigationAction -- 74 kB -- 23.4 kB
Box -- 69.4 kB -- 21 kB
Breadcrumbs -- 66.6 kB -- 20.9 kB
Button -- 78 kB -- 23.8 kB
ButtonBase -- 72.5 kB -- 22.7 kB
ButtonGroup -- 80.6 kB -- 24.7 kB
Card -- 61.3 kB -- 19.2 kB
CardActionArea -- 73.6 kB -- 23.2 kB
CardActions -- 60.7 kB -- 19 kB
CardContent -- 60.6 kB -- 18.9 kB
CardHeader -- 63.7 kB -- 20 kB
CardMedia -- 61 kB -- 19.1 kB
Checkbox -- 80.4 kB -- 25.2 kB
Chip -- 81.1 kB -- 24.8 kB
CircularProgress -- 62.7 kB -- 19.7 kB
ClickAwayListener -- 3.87 kB -- 1.56 kB
Collapse -- 66.5 kB -- 20.5 kB
colorManipulator -- 3.83 kB -- 1.52 kB
Container -- 61.8 kB -- 19.3 kB
CssBaseline -- 56.2 kB -- 17.6 kB
Dialog -- 81.2 kB -- 25.2 kB
DialogActions -- 60.7 kB -- 19 kB
DialogContent -- 60.8 kB -- 19.1 kB
DialogContentText -- 62.7 kB -- 19.7 kB
DialogTitle -- 62.9 kB -- 19.8 kB
Divider -- 61.2 kB -- 19.2 kB
docs.landing -- 55.5 kB -- 14.4 kB
docs.main -- 609 kB -- 194 kB
Drawer -- 82.9 kB -- 25.7 kB
ExpansionPanel -- 69.9 kB -- 21.8 kB
ExpansionPanelActions -- 60.7 kB -- 19 kB
ExpansionPanelDetails -- 60.6 kB -- 18.9 kB
ExpansionPanelSummary -- 76.7 kB -- 24.1 kB
Fab -- 75.4 kB -- 23.4 kB
Fade -- 22.2 kB -- 7.66 kB
FilledInput -- 72.2 kB -- 22.3 kB
FormControl -- 63 kB -- 19.5 kB
FormControlLabel -- 64.1 kB -- 20.1 kB
FormGroup -- 60.6 kB -- 19 kB
FormHelperText -- 61.9 kB -- 19.4 kB
FormLabel -- 62.1 kB -- 19.2 kB
Grid -- 63.7 kB -- 20 kB
GridList -- 61.1 kB -- 19.2 kB
GridListTile -- 62.3 kB -- 19.5 kB
GridListTileBar -- 61.8 kB -- 19.4 kB
Grow -- 22.8 kB -- 7.79 kB
Hidden -- 64.5 kB -- 20.2 kB
Icon -- 61.4 kB -- 19.2 kB
IconButton -- 74.7 kB -- 23.2 kB
Input -- 71.1 kB -- 22.1 kB
InputAdornment -- 63.7 kB -- 20.1 kB
InputBase -- 69.2 kB -- 21.7 kB
InputLabel -- 63.9 kB -- 19.9 kB
LinearProgress -- 64 kB -- 19.9 kB
Link -- 65.2 kB -- 20.7 kB
List -- 61 kB -- 18.9 kB
ListItem -- 75.7 kB -- 23.6 kB
ListItemAvatar -- 60.7 kB -- 19 kB
ListItemIcon -- 60.8 kB -- 19 kB
ListItemSecondaryAction -- 60.6 kB -- 19 kB
ListItemText -- 63.6 kB -- 20 kB
ListSubheader -- 61.4 kB -- 19.3 kB
Menu -- 86.9 kB -- 27.3 kB
MenuItem -- 76.7 kB -- 23.9 kB
MenuList -- 64.6 kB -- 20.1 kB
MobileStepper -- 66.3 kB -- 20.7 kB
Modal -- 14.2 kB -- 4.98 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.2 kB -- 25.1 kB
Popper -- 28.6 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 81.2 kB -- 25.5 kB
RadioGroup -- 61.8 kB -- 19.3 kB
Rating -- 68.6 kB -- 22 kB
RootRef -- 4.43 kB -- 1.67 kB
Skeleton -- 61.2 kB -- 19.3 kB
Slide -- 24.3 kB -- 8.27 kB
Slider -- 74.2 kB -- 23.4 kB
Snackbar -- 75.7 kB -- 23.6 kB
SnackbarContent -- 64.3 kB -- 20.2 kB
SpeedDial -- 84.6 kB -- 26.6 kB
SpeedDialAction -- 115 kB -- 36.4 kB
SpeedDialIcon -- 63.2 kB -- 19.8 kB
Step -- 61.2 kB -- 19.2 kB
StepButton -- 80.9 kB -- 25.4 kB
StepConnector -- 61.3 kB -- 19.3 kB
StepContent -- 67.6 kB -- 21.1 kB
StepIcon -- 63.3 kB -- 19.7 kB
StepLabel -- 67.2 kB -- 21.1 kB
Stepper -- 63.4 kB -- 19.9 kB
styles/createMuiTheme -- 15.4 kB -- 5.43 kB
SvgIcon -- 61.7 kB -- 19.2 kB
SwipeableDrawer -- 90.3 kB -- 28.1 kB
Switch -- 79.7 kB -- 24.8 kB
Tab -- 74.9 kB -- 23.7 kB
Table -- 61.2 kB -- 19.2 kB
TableBody -- 60.7 kB -- 19 kB
TableCell -- 62.7 kB -- 19.7 kB
TableFooter -- 60.7 kB -- 19 kB
TableHead -- 60.7 kB -- 19 kB
TableRow -- 61.1 kB -- 19.1 kB
TableSortLabel -- 75.9 kB -- 24 kB
Tabs -- 84 kB -- 26.8 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
ToggleButton -- 74.7 kB -- 23.6 kB
ToggleButtonGroup -- 61.8 kB -- 19.4 kB
Toolbar -- 60.9 kB -- 19.1 kB
Tooltip -- 99.1 kB -- 31.4 kB
TreeItem -- 72.2 kB -- 22.7 kB
TreeView -- 65 kB -- 20.3 kB
Typography -- 62.3 kB -- 19.4 kB
useAutocomplete -- 12.3 kB -- 4.54 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 22.3 kB -- 7.67 kB

Generated by 🚫 dangerJS against 5018f21

@eps1lon
Copy link
Member

eps1lon commented Oct 27, 2019

I added some tests (SarthakC#1) how I think this new behavior should work.

@SarthakC
Copy link
Contributor Author

I added some tests (SarthakC#1) how I think this new behavior should work.

Thank you. I will work on this and revert.

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0280b6b:

Sandbox Source
create-react-app Configuration
create-react-app-with-typescript Configuration

@SarthakC SarthakC force-pushed the sarthak/simple-select branch from 678876a to 452bc99 Compare October 29, 2019 18:51
@SarthakC SarthakC marked this pull request as ready for review October 29, 2019 19:05
@SarthakC SarthakC requested a review from eps1lon October 29, 2019 19:06
@SarthakC
Copy link
Contributor Author

I added some tests (SarthakC#1) how I think this new behavior should work.

It worked. I added a few more tests based on yours.

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.

Looks good. Just needs some polish.

packages/material-ui/src/Select/Select.test.js Outdated Show resolved Hide resolved
packages/material-ui/src/Select/SelectInput.js Outdated Show resolved Hide resolved
@eps1lon eps1lon added bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! labels Oct 30, 2019
@SarthakC SarthakC requested a review from eps1lon November 2, 2019 19:32
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.

@SarthakC Thanks for fixing the tests. I have looked at the behavior of the select, I have seen two regressions:

@oliviertassinari
Copy link
Member

@SarthakC Hi. Do you think that you will be able to handle the regressions?

@SarthakC
Copy link
Contributor Author

@SarthakC Hi. Do you think that you will be able to handle the regressions?

@oliviertassinari Hello! Sorry for AWOL. I have been down with the flu. I shall be able to get back to this as soon as I get better.

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 13, 2019

@SarthakC No problem, I hope you feel better soon :)

@oliviertassinari
Copy link
Member

@SarthakC I have pushed a two-line fixe and rebased with an update of the test. I hope it will do it and that you are doing better.

@oliviertassinari oliviertassinari changed the title [Select] Improve response [Select] Improve response, react to mouse down Nov 22, 2019
@SarthakC
Copy link
Contributor Author

@SarthakC I have pushed a two-line fixe and rebased with an update of the test. I hope it will do it and that you are doing better.

Thank you @oliviertassinari
I am recovering now. My period of convalescence was longer than I expected. Need to change my city 😅

@oliviertassinari
Copy link
Member

@SarthakC Thank you

eps1lon added a commit to eps1lon/material-ui that referenced this pull request Nov 25, 2019
eps1lon added a commit to eps1lon/material-ui that referenced this pull request Nov 25, 2019
eps1lon added a commit to eps1lon/material-ui that referenced this pull request Nov 25, 2019
@herrethan
Copy link

Wanted to mention we had similar breakage happen due to the Select onClick change from this PR, inside the renderValue component:

<Select
  renderValue={() => (
    <TextField
      // this no longer fires
      onClick={e => doSomething(e)}
    />
  )}
/>

the solution is to now use onMouseDown instead of onClick here, but would this be recommended for any element you use as the renderValue?
seems like something worth making a little more noise about.

@oliviertassinari
Copy link
Member

@herrethan What's your use case for rendering a TextField here, with on click?

@eps1lon What do you think of reverting these changes? We have seen a couple of negative effects from this change:

  • people using onClick in their unit tests
  • people rendering custom elements inside the select

Does it worth it? And if it does, released under a patch, is this right? 🤔

@herrethan
Copy link

@oliviertassinari thanks!

We have a unique input field that is a combo between text input and select dropdown, where the select options are predefined values meant to be convenience selections that populate the text input.

On the TextField onClick we e.stopPropagation() to allow the user to enter text in the text input. There are surely other ways of achieving this but I was wondering more generally about anyone trying to capture onClick from inside the renderValue.

@oliviertassinari
Copy link
Member

oliviertassinari commented Dec 11, 2019

Right, the counter-arguments to revert are that 1. the patch was meant to improve user experience 2. the test regression impact unit tests (not e2e), tests that could be less dependent on the event but only consider the user actions. 3. People rendering custom interactive elements in the select, likely want to use https://material-ui.com/components/autocomplete/ instead.

@eps1lon
Copy link
Member

eps1lon commented Dec 11, 2019

people using onClick in their unit tests

This would be bad precedent. It was a bug. People relying on this bug (especially in a test) should not block the fix.

people rendering custom elements inside the select

We have to stop at some point. Customization doesn't mean you should do everything that's possible.

Especially the example from @herrethan is a classic combobox. It was never intended to use the Select in that way.

This is why it is important in open source to give back. Have a use case that isn't explicitly documented? Contribute a test case or documentation or open an issue if the use case is not trivial and let maintainers handle the integration. Not sure if it's trivial or not? Open anyway.

I also want to emphasize that we have to be more confident in our judgement. We can't consider a revert because of a single issue report. Instead figure out how to best move forward.

@oliviertassinari
Copy link
Member

oliviertassinari commented Dec 11, 2019

We had the following reports: #18658, #18655.

@eps1lon
Copy link
Member

eps1lon commented Dec 11, 2019

[...] #18655.

I explicitly addressed this one. It was relying on a bug. This should never block a fix.

The special use case should be considered though.

@oliviertassinari
Copy link
Member

OK thanks. I think that we should leave it more time, to see how things settle. My main concern now (releasing it under a patch, that's too later) is with how people write unit tests, we are making it a bit harder for them but that's DX based and not UX based.

@eps1lon
Copy link
Member

eps1lon commented Dec 12, 2019

we are making it a bit harder for them

No we are fixing a bug. You are now making an argument to never release fixes because people might rely on them in their software.

@SarthakC SarthakC deleted the sarthak/simple-select branch December 12, 2019 17:48
@koustubhmoharir
Copy link

I use the Select component inside a DataGrid cell. This change broke the logic to enter editing mode in the cell. Attempting to fix it breaks other parts of the DataGrid logic. I will have to spend a few hours getting everything working again. Given that the difference is perceived performance (between click and mouse down) is not even noticeable (at least to me), I wonder if this change was worth it.

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] Feels less response than native counterpart
6 participants