-
Notifications
You must be signed in to change notification settings - Fork 91
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
fix(modals): prevent html overflow #894
Conversation
fcb063c
to
7fef3f2
Compare
7fef3f2
to
f2d3b64
Compare
} | ||
|
||
if (htmlElement) { | ||
previousHtmlOverflowY = htmlElement.style.overflowY; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overflow needs to be hidden
on both axes, not just y
.
@@ -138,17 +141,32 @@ export const Modal = React.forwardRef<HTMLDivElement, IModalProps>( | |||
bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize}px`; | |||
} | |||
|
|||
const previousBodyOverflow = bodyElement.style.overflow; | |||
previousBodyOverflow = bodyElement.style.overflow; | |||
|
|||
bodyElement.style.overflow = 'hidden'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is body
overflow management being retained?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh wow, it doesn't and the solution can be simplified a lot. Thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This maps to how the 1.0 version of modals was developed:
componentDidUpdate(prevProps) {
const { hidden } = this.props;
const { hidden: prevHidden } = prevProps;
if (!hidden && prevHidden) {
document.querySelector("html").style.overflow = "hidden";
} else if (hidden && !prevHidden) {
document.querySelector("html").style.overflow = "";
this.tabJail = null;
}
}
...not sure why it was changed in version 2.0.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jzempel I think the original html
-> body
overflow change was due to iframed areas that were using Modal
. Before we allowed document
to be provided by the ThemeProvider
this was a bigger issue.
Description
When Bedrock CSS is turned on and the
Modal
andDrawerModal
components are opened the main window should be inert, but the user can scroll the main window.Steps to reproduce:
Modal
orDrawerModal
Detail
The Bedrock CSS that normalizes CSS in the Garden ecosystem applies an
overflow-y:scroll;
to thehtml
element. In some cases like modal components, theoverflow-y:scroll;
should be overwritten so that inert windows behind an open modal dialog cannot be scrolled.This PR proposes to modify overflow CSS for the
html
element instead of thebody
element. By doing so, theoverflow
from Bedrock CSS is correctly overwritten when a modal is opened.Screenshots
Before: when Bedrock CSS is turned on, the user can scroll an inert window behind open modals
After: when Bedrock CSS is turned on, the user cannot scroll an inert window behind open modals
Checklist
yarn start
)?bedrock
)