[popover] Expose an imperative updatePosition() API for Popover
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
I'm using Popover with content that can change size after it has opened (for example, a "Show more" button that expands the content).
When the content expands, the popover continues using the position and available height that were calculated when it first opened. As a result, it can overflow the viewport instead of being repositioned or having its available height recomputed.
Floating UI already supports recomputing the position via update(), but I couldn't find a way to trigger this through Base UI's public API.
It would be useful if the imperative handle exposed something like:
`handle.updatePosition();`
This would allow consumers to request a recomputation after dynamic layout changes such as:
- Expanding/collapsing sections ("Show more")
- Async data loading
- Images loading
- Virtualized content changing size
- Content that changes height based on user interaction
Currently the only workaround I've found is to remount the Popover.Positioner (increasing its key), which resets the internal state of the popover content and isn't ideal.
Contributor guide
Research direction
Start at the Popover imperative handle and trace how the component currently integrates Floating UI's update() behavior. Expose an updatePosition() method that lets consumers recompute the popover position and available height after content changes, then verify it for expansion, asynchronous loading, image loading, and other dynamic size changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100