What is the best practice for positioning inline edit overlays when the target element is outside the viewport?

[lixiaoyan]

For inline editing patterns (similar to the editable cells in S2 TableView), S2's current approach is to display a popover positioned directly over the target element. We've adopted a similar strategy for some of our components, but we've run into an issue: if the editable element is outside the viewport, the popover also renders off-screen and remains invisible. From the user's perspective, the page simply becomes unresponsive.

This typically occurs when, for example, a new row is added and immediately transitions into edit mode. Since the new row and the popover are rendered within the exact same render cycle, there isn't a suitable lifecycle timing to scroll the page and bring the element into view before the popup appears.

Are there any best practices or recommended workarounds for resolving this type of issue?

(Note: Our implementation differs slightly—we use a dialog instead of a popover, along with custom positioning logic.)

[snowystinger]

We haven't come across this yet, would you be willing to put together a stackblitz showing it?

Otherwise, you could always delay by a render. Or measure based on a row before/after that you know exists?