-
Notifications
You must be signed in to change notification settings - Fork 615
Set the disable scroll class after the scrollbar width is calculated #6281
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
Conversation
|
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. 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.
Pull Request Overview
This PR fixes the timing of setting the --dialog-scrollgutter
CSS variable by calculating the scrollbar width before disabling scroll, and moves the DisableScroll
class application from the rendered className
to runtime via a ref.
- Calculate
scrollbarWidth
before disabling scroll - Add
classes.DisableScroll
viadialogRef.current
in auseEffect
- Remove
classes.DisableScroll
from the staticclassName
prop
Comments suppressed due to low confidence (1)
packages/react/src/Dialog/Dialog.tsx:293
- If the intent is to disable page scrolling, confirm that
classes.DisableScroll
targets the correct element (e.g.,document.body
) — otherwise the scroll lock may not work as expected on the dialog element.
dialogRef.current?.classList.add(classes.DisableScroll)
size-limit report 📦
|
Pull Request is not mergeable
follow up to #6266
The fix wasn't working because it was calculating the scrollbar width after it had already been disabled which was giving
0px
. I'm going to skip the changeset since this is meant to be part of the other change.