Skip to content

Custom Trigger Boundary for popovers #4599

Closed
@ritz078

Description

@ritz078

🙋 Feature Request

Right now, the popover position is calculated relative to the trigger element on basis of the triggerRef that we pass to the popover. There are situations where we want the boundary of the popover to be calculated relative to another element.

Taking the below example:

image

In the above example, we want to open the popover to the left of the sidebar instead of just relative to the trigger element irrespective of where in the sidebar the element is. So I want to set the custom trigger boundary relative to the trigger parent which takes the full width.

💁 Possible Solution

usePopover can accept a new property positionAnchor which can accept a HTML element. This element can be used to position the popover.

🔦 Context

I have many buttons inside the sidebar that act as trigger elements for menu, dropdown etc. We want to open the dropdown outside of the sidebar.

We tried to set the offset by calculating the distance ourselves but we can't use popover's placement logic to place it correctly depending on the space available in other places.

💻 Examples

Figma uses a similar approach to open dropdowns in their sidebar

Screenshot 2023-05-26 at 10 46 01 PM

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions