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

Option to disable popover autoUpdate #2555

Open
edenstrom opened this issue Nov 30, 2023 · 6 comments · May be fixed by #3359
Open

Option to disable popover autoUpdate #2555

edenstrom opened this issue Nov 30, 2023 · 6 comments · May be fixed by #3359
Labels
Package: react/popper Type: Enhancement Small enhancement to existing primitive/feature

Comments

@edenstrom
Copy link

edenstrom commented Nov 30, 2023 •
edited
Loading

Feature request

Overview

Currently when the anchor/trigger is moved, the Popover is moved accordingly.

99% of the time, this is the expected behavior.

We want to replicate a similar UI as Linear where the actual trigger of the popover changes size/position. The popover itself should not move though.

CleanShot.2023-11-30.at.13.38.19.mp4

We can sort-of get it solved by adding a position absolute div as an anchor, but not the most beautiful solution.

Who does this impact? Who is this for?

I would say it's a pretty niche feature, but usable for features where the Popover modifies the anchor.

Additional context

Minimal reproduction of the issue: CodeSandbox link

  • Press button to open Popover
  • Press button inside popover
  • Popover moves because the trigger moved.

Maybe I've missed some setting that exists that can solve it.

Related issues:
@benoitgrelard benoitgrelard mentioned this issue Mar 8, 2024
Closed
@benoitgrelard benoitgrelard added Type: Enhancement Small enhancement to existing primitive/feature Package: react/popper labels Mar 8, 2024
@zernonia zernonia mentioned this issue Jul 3, 2024
Closed
2 tasks
@fergy-os
Copy link

@edenstrom did you ever get this to work like the linear app?

@tomasmenezes
Copy link

Any update on this?

@carlosbensant
Copy link

We need a way to disable this behavior easily.

@vavdav
Copy link

vavdav commented Dec 4, 2024

It would be great to have control over this.

@martinsvinicius martinsvinicius linked a pull request Feb 3, 2025 that will close this issue
Open
@rodrigoeduardo
Copy link

Seems like there's an open PR adding that. Hope it gets approved soon

@martinsvinicius
Copy link

No need for this, you can set a <Popover.Anchor /> to pin it to, avoiding the auto-update like so:

<Popover>
  <Popover.Anchor><Icon /></Popover.Anchor> // <--- The popover content will always pin to this
  <div>{newStatus}</div>                   // <--- some dynamic child (trigger) width
</Popover>

As you can see in the issue's video example, the Trigger needs to be the Anchor. Also, if the Anchor comes after the dynamic child, it will cause the same behavior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: react/popper Type: Enhancement Small enhancement to existing primitive/feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Popper] Add option to disable update position on layout shift martinsvinicius/primitives
8 participants
@vavdav @benoitgrelard @carlosbensant @edenstrom @tomasmenezes @rodrigoeduardo @martinsvinicius @fergy-os