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.

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

CustomSelectControl V2 popover renders below position: sticky elements #63180

Open
Tracked by #55023
ciampo opened this issue Jul 5, 2024 · 1 comment
Open
Tracked by #55023
Labels
[Package] Components /packages/components

Comments

@ciampo
Copy link
Contributor

ciampo commented Jul 5, 2024

As flagged in #62821 (see PR description):

The V2 version of the component automatically "flips" the popover to render on top of the trigger if there isn't enough space below it. In the specific example of the block toolbar, this causes a small visual glitch when the browser's viewport is short enough to cause the flip:

Screenshot 2024-06-25 at 12 13 32

This glitch happens because the block toolbar's header has position: sticky, which causes it to render on top of the select popover despite a lower z-index.

A few preliminary ideas that try to avoid the problem rather than solving it:

  • disallow the popover to flip
  • allow for lower minimum height

I'm not sure we can solve this systematically at the CSS level. At most we could look into where in the DOM the popover is rendered, and consider portalling it so that it plays better with the stacking context?

@ciampo ciampo changed the title conflict with stacking context when rendering next to position: sticky elements CustomSelectControl V2 popover renders below position: sticky elements Jul 5, 2024
@ciampo ciampo added the [Package] Components /packages/components label Jul 5, 2024
@ciampo
Copy link
Contributor Author

ciampo commented Jul 10, 2024

While #63357 should avoid the issue for the V2 legacy adapter (soon to be the new V1) component, we will still need to understand how to best solve this for the V2:

  • keep flip disabled (although we could encounter the same issue in future layouts / etc)
  • somewhat set as "boundaries" for the popover the correct height of the panel (excluding the header)
  • solve it via allowing the popover to be portaled to a plan in the DOM where the stacking context is not a constraints
  • ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components
Projects
None yet
Development

No branches or pull requests

1 participant