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

Ensure anchored components are always rendered in a stacking context #3115

Merged
merged 2 commits into from
Apr 19, 2024
Merged

Ensure anchored components are always rendered in a stacking context #3115

merged 2 commits into from
Apr 19, 2024

Commits on Apr 19, 2024

  1. provide floatingStyles based on incoming anchor information 

    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.
    @RobinMalfait
    RobinMalfait committed Apr 19, 2024
    Configuration menu
    Copy the full SHA
    dcc7cde View commit details
    Browse the repository at this point in the history

  2. update changelog

    @RobinMalfait
    RobinMalfait committed Apr 19, 2024
    Configuration menu
    Copy the full SHA
    d151561 View commit details
    Browse the repository at this point in the history