-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
Ensure anchored components are always rendered in a stacking context #3115
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Before this change, we were only providing the `floatingStyles` based on the `isEnabled` state. However, this relies on information that is only available in the next render. Now the styles are provided one render too late. This means, that there will be a moment where the `ListboxOptions` (in case of a `Listbox`) is rendered at the end of the page (and expanding the height of the parent) without positioning it on top of it in a separate layer (due to the `position: absolute;`) The reason this was added was to prevent applying styles to the `ListboxOptions` if it did not require anchoring (aka no `anchor={{…}}` prop is provided). Instead of relying on the `isEnabled` value (which is computed based on information that is only available in the next render), we provide the styles based on the incoming `anchor` information which is available immediately. The cool thing is that Floating UI is already providing a default `position: absolute; top: 0; left: 0;` style. If we apply this, it's already stacked instead of rendering at the end of the page.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
thecrypticace
approved these changes
Apr 19, 2024
This was referenced May 28, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR ensures that components with the
anchor
prop always use thefloatingStyles
from Floating UI (which containsposition: absolute
).This is important, otherwise there is a brief moment where the
<ListboxOptions anchor={…} />
(in case of aListbox
) is rendered at the end of the page.One side effect of this is that this could cause a scrollbar to appear for a moment. But the
anchor
prop also renders the component in aModal
which does scroll locking (by applyingoverflow: hidden;
to the body).A side effect of adding
overflow: hidden
is that the scrollbar is removed. This is nice, but this causes a visual jump when the scrollbar is removed. To counteract this, we also add apadding-right
based on the width of the scrollbar to the body to prevent the visual jump.But because of the brief moment where the scrollbar is visible, we also add a
padding-right
to the body to prevent the visual jump actually which now causes a visual glitch now. Head scratcher...Long story short, no more accidental scrollbar appearing for a brief moment.