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

[Modal] Fix scroll jump issue #18808

Merged
merged 3 commits into from
Dec 12, 2019
Merged

Conversation

cvara
Copy link
Contributor

@cvara cvara commented Dec 12, 2019

Fixes scroll jump issue that occurs when opening Modal (#18793)

@oliviertassinari I deviated from your suggested diff so that scroll is still disabled when the container is not overflowing (I also added a related test for that).

Closes #18793

@oliviertassinari oliviertassinari changed the title Fix modal scroll jump [Modal] Fix modal scroll jump Dec 12, 2019
@cvara cvara changed the title [Modal] Fix modal scroll jump [Modal] Fix scroll jump issue Dec 12, 2019
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: modal This is the name of the generic UI component, not the React module! labels Dec 12, 2019
@mui-pr-bot
Copy link

mui-pr-bot commented Dec 12, 2019

Details of bundle changes.

Comparing: 6fb06f9...a30251e

bundle Size Change Size Gzip Change Gzip
Menu ▼ -5 B (-0.01% ) 86.9 kB ▼ -6 B (-0.02% ) 26.7 kB
Drawer ▼ -5 B (-0.01% ) 83 kB ▼ -5 B (-0.02% ) 25.2 kB
SwipeableDrawer ▼ -5 B (-0.01% ) 90.4 kB ▼ -5 B (-0.02% ) 27.9 kB
@material-ui/core[umd] ▼ -5 B (-0.00% ) 314 kB ▼ -4 B (-0.00% ) 90.4 kB
Dialog ▼ -5 B (-0.01% ) 81.3 kB ▼ -4 B (-0.02% ) 25.4 kB
docs.main ▼ -5 B (-0.00% ) 610 kB ▲ +4 B (0.00% ) 194 kB
Popover ▼ -5 B (-0.01% ) 81.3 kB ▼ -4 B (-0.02% ) 25.1 kB
Select ▼ -5 B (-0.00% ) 113 kB ▼ -4 B (-0.01% ) 33.5 kB
TextField ▼ -5 B (-0.00% ) 122 kB ▼ -4 B (-0.01% ) 35.6 kB
Modal ▼ -5 B (-0.04% ) 14.3 kB ▼ -3 B (-0.06% ) 5 kB
TablePagination ▼ -5 B (-0.00% ) 140 kB ▼ -3 B (-0.01% ) 40.8 kB
@material-ui/core ▼ -5 B (-0.00% ) 357 kB -- 97.4 kB
@material-ui/lab -- 175 kB -- 52.4 kB
@material-ui/styles -- 50.8 kB -- 15.3 kB
@material-ui/system -- 14.5 kB -- 4.04 kB
AppBar -- 62.5 kB -- 19.5 kB
Autocomplete -- 127 kB -- 39.8 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
BottomNavigationAction -- 74.1 kB -- 23.4 kB
Box -- 69.4 kB -- 21 kB
Breadcrumbs -- 66.7 kB -- 20.8 kB
Button -- 78.4 kB -- 23.9 kB
ButtonBase -- 72.6 kB -- 22.7 kB
ButtonGroup -- 81.8 kB -- 25 kB
Card -- 61.4 kB -- 19.1 kB
CardActionArea -- 73.7 kB -- 23.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
Checkbox -- 80.6 kB -- 25.4 kB
Chip -- 81.2 kB -- 24.8 kB
CircularProgress -- 62.8 kB -- 19.7 kB
ClickAwayListener -- 3.85 kB -- 1.55 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
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
ExpansionPanel -- 69.9 kB -- 21.8 kB
ExpansionPanelActions -- 60.8 kB -- 19 kB
ExpansionPanelDetails -- 60.6 kB -- 18.9 kB
ExpansionPanelSummary -- 76.8 kB -- 24.2 kB
Fab -- 75.5 kB -- 23.4 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 -- 19.9 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
IconButton -- 74.8 kB -- 23.3 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 -- 19.9 kB
Link -- 65.3 kB -- 20.5 kB
List -- 61 kB -- 19 kB
ListItem -- 75.8 kB -- 23.6 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
MenuItem -- 76.8 kB -- 23.9 kB
MenuList -- 64.6 kB -- 20.2 kB
MobileStepper -- 66.4 kB -- 20.7 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
Popper -- 28.7 kB -- 10.3 kB
Portal -- 2.9 kB -- 1.3 kB
Radio -- 81.5 kB -- 25.6 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
SpeedDial -- 84.7 kB -- 26.7 kB
SpeedDialAction -- 116 kB -- 36.5 kB
SpeedDialIcon -- 63.2 kB -- 19.8 kB
Step -- 61.3 kB -- 19.2 kB
StepButton -- 80.9 kB -- 25.5 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
Switch -- 79.8 kB -- 25 kB
Tab -- 75 kB -- 23.7 kB
Table -- 61.2 kB -- 19.2 kB
TableBody -- 60.8 kB -- 19 kB
TableCell -- 62.7 kB -- 19.7 kB
TableContainer -- 60.6 kB -- 18.9 kB
TableFooter -- 60.8 kB -- 19 kB
TableHead -- 60.8 kB -- 19 kB
TableRow -- 61.2 kB -- 19.1 kB
TableSortLabel -- 76 kB -- 23.8 kB
Tabs -- 84.1 kB -- 26.5 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
ToggleButton -- 74.8 kB -- 23.6 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.4 kB -- 4.62 kB
useMediaQuery -- 2.5 kB -- 1.06 kB
Zoom -- 22.3 kB -- 7.68 kB

Generated by 🚫 dangerJS against a30251e

@oliviertassinari
Copy link
Member

@cvara Thanks for the new test case! I have tried to make the logic a bit denser, let me know :)

@cvara
Copy link
Contributor Author

cvara commented Dec 12, 2019

Yeah, I misread your diff, sorry. It's cleaner this way.

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.

I'm happy to see this bug fixed!

@oliviertassinari
Copy link
Member

Thank you!

@cvara
Copy link
Contributor Author

cvara commented Dec 12, 2019

Happy to have helped a bit :)

@oliviertassinari
Copy link
Member

oliviertassinari commented Dec 12, 2019

Contribution like this one x1,000 contributors, it makes a huge difference :).

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: modal 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.

[Modal] Opening Modal causes the page to scroll
3 participants