Ensure anchored components are always rendered in a stacking context #3115
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
anchorprop always use thefloatingStylesfrom 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
anchorprop also renders the component in aModalwhich does scroll locking (by applyingoverflow: hidden;to the body).A side effect of adding
overflow: hiddenis 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-rightbased 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-rightto 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.