[v4] Popup: let field-anchored popups scroll away with their trigger instead of pinning to the viewport

[VeiaG]

The current behaviour

In Payload 4, Popup uses position: fixed, recomputes its position on every scroll, and clamps top into the viewport (Popup/index.tsx#L428-L429):

const maxTop = Math.max(offset, window.innerHeight - popupRect.height - offset)
top = Math.max(offset, Math.min(top, maxTop))

While the trigger is on screen, the popup follows it. Once the page scrolls the trigger out of view, the popup stays pinned to the top or bottom edge of the viewport. It's detached from its trigger and floats over unrelated fields.

Payload 3 positioned the popup in page coordinates (3.x Popup/index.tsx#L187: triggerRect.bottom + window.scrollY + offset, with no vertical clamp), so it scrolled away together with its trigger.

Why it matters

Pinning is a good default for menus opened from fixed chrome, like the header or the document controls. For a popup anchored to a form field, though, it reads as a bug: the panel belongs to a field the editor can no longer see. ReactSelect's menu, the other dropdown used by native fields, scrolls with its field.

I hit this while porting plugin with custom fields to v4.

Proposal

An opt-in prop that ties the vertical position to the trigger, for example:

/**
 * `viewport` (default): keep the popup on screen, as today.
 * `trigger`: no vertical clamp, so the popup scrolls away with its trigger.
 */
readonly boundary?: 'trigger' | 'viewport'

PopupProps already declares boundingRef?: React.RefObject<HTMLElement>, but nothing in the v4 Popup reads it. It could carry this instead: clamp to that element's rect instead of the viewport. Passing the field's own wrapper would then give the "follow the trigger" behaviour.