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

[Modal] Prefer to lock scroll on body than html element #18445

Merged
merged 2 commits into from
Nov 19, 2019
Merged

[Modal] Prefer to lock scroll on body than html element #18445

merged 2 commits into from
Nov 19, 2019

Conversation

andreasheim
Copy link
Contributor

@andreasheim andreasheim commented Nov 19, 2019 •
edited by oliviertassinari
Loading

Close #18336

Summary:
Changing overflow on the html element may/will reset the page scroll position, in particular when overflow is already applied to the body element.

This change restores behavior prior to #17972 unless overflow is already applied to the html element.

@mui-pr-bot
Copy link

mui-pr-bot commented Nov 19, 2019 •
edited
Loading

Details of bundle changes.

Comparing: 9c2f734...66000c1

bundle Size Change Size Gzip Change Gzip
Drawer ▲ +53 B (+0.06% ) 82.9 kB ▲ +23 B (+0.09% ) 25.7 kB
@material-ui/core[umd] ▲ +53 B (+0.02% ) 310 kB ▲ +22 B (+0.02% ) 89.3 kB
docs.main ▲ +53 B (+0.01% ) 609 kB ▲ +20 B (+0.01% ) 194 kB
Modal ▲ +53 B (+0.37% ) 14.2 kB ▲ +20 B (+0.40% ) 4.98 kB
TextField ▲ +53 B (+0.04% ) 122 kB ▲ +20 B (+0.06% ) 35.5 kB
Dialog ▲ +53 B (+0.07% ) 81.2 kB ▲ +19 B (+0.08% ) 25.2 kB
Menu ▲ +53 B (+0.06% ) 86.9 kB ▲ +19 B (+0.07% ) 27.3 kB
Popover ▲ +53 B (+0.07% ) 81.2 kB ▲ +17 B (+0.07% ) 25.1 kB
Select ▲ +53 B (+0.05% ) 113 kB ▲ +17 B (+0.05% ) 33.5 kB
SwipeableDrawer ▲ +53 B (+0.06% ) 90.3 kB ▲ +17 B (+0.06% ) 28.1 kB
@material-ui/core ▲ +53 B (+0.02% ) 351 kB ▲ +14 B (+0.01% ) 96 kB
TablePagination ▲ +53 B (+0.04% ) 139 kB ▲ +14 B (+0.03% ) 40.7 kB
@material-ui/lab -- 172 kB -- 51.8 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
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
ExpansionPanel -- 69.8 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
MenuItem -- 76.7 kB -- 23.9 kB
MenuList -- 64.6 kB -- 20.1 kB
MobileStepper -- 66.3 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.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.1 kB -- 19.2 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
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.3 kB
TreeItem -- 72.2 kB -- 22.7 kB
TreeView -- 65 kB -- 20.3 kB
Typography -- 62.3 kB -- 19.4 kB
useAutocomplete -- 12.2 kB -- 4.5 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 22.3 kB -- 7.67 kB

Generated by 🚫 dangerJS against 66000c1

@andreasheim andreasheim force-pushed the popover-fix-overflow-hidden-issue branch from bf39cff to ddedc56 Compare November 19, 2019 01:06
@oliviertassinari oliviertassinari changed the title [Popover/Modal] Prevent page scroll on open when html overflow is not applied [Modal] Prefer to lock scroll on body than html element Nov 19, 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 Nov 19, 2019
oliviertassinari
oliviertassinari approved these changes Nov 19, 2019
View reviewed changes
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.

Thanks for fixing the tests.

@oliviertassinari oliviertassinari merged commit d1aae91 into mui:master Nov 19, 2019
@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
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: modal 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.

[Modal] html overflow hidden issue
3 participants
@andreasheim @mui-pr-bot @oliviertassinari