Skip to content

CustomSelectControl V2 popover renders below position: sticky elements #63180

@ciampo

Description

@ciampo

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?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions