Skip to content

[Select] Improve response, react to mouse down#17978

Merged
oliviertassinari merged 7 commits into
mui:masterfrom
SarthakC:sarthak/simple-select
Nov 23, 2019
Merged

[Select] Improve response, react to mouse down#17978
oliviertassinari merged 7 commits into
mui:masterfrom
SarthakC:sarthak/simple-select

Conversation

@SarthakC

Copy link
Copy Markdown
Contributor

resolves #8999

@mui-pr-bot

mui-pr-bot commented Oct 21, 2019

Copy link
Copy Markdown
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

Comment thread packages/material-ui/src/Select/SelectInput.js Outdated
@eps1lon

eps1lon commented Oct 27, 2019

Copy link
Copy Markdown
Member

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

@SarthakC

Copy link
Copy Markdown
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
Copy Markdown

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
Copy Markdown
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.

@eps1lon eps1lon left a comment

Copy link
Copy Markdown
Member

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.

Comment thread packages/material-ui/src/Select/Select.test.js Outdated
Comment thread packages/material-ui/src/Select/SelectInput.js Outdated
@eps1lon eps1lon added type: bug It doesn't behave as expected. scope: select Changes related to the select. labels Oct 30, 2019
@SarthakC
SarthakC requested a review from eps1lon November 2, 2019 19:32

@oliviertassinari oliviertassinari left a comment

Copy link
Copy Markdown
Member

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
Copy Markdown
Member

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

@SarthakC

Copy link
Copy Markdown
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

oliviertassinari commented Nov 13, 2019

Copy link
Copy Markdown
Member

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

@oliviertassinari

Copy link
Copy Markdown
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
Comment thread packages/material-ui/src/Select/Select.test.js
@SarthakC

Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown

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
Copy Markdown
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
Copy Markdown

@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

oliviertassinari commented Dec 11, 2019

Copy link
Copy Markdown
Member

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

eps1lon commented Dec 11, 2019

Copy link
Copy Markdown
Member

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

oliviertassinari commented Dec 11, 2019

Copy link
Copy Markdown
Member

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

@eps1lon

eps1lon commented Dec 11, 2019

Copy link
Copy Markdown
Member

[...] #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
Copy Markdown
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

eps1lon commented Dec 12, 2019

Copy link
Copy Markdown
Member

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
Copy Markdown

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

scope: select Changes related to the select. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Select] Feels less response than native counterpart

6 participants