Description
When a Popover is opened, the page scrolls to the top. This happens because the popover content is portaled to the end of <body> via PopoverPrimitive.Portal, and FloatingFocusManager calls focus() on the popup element without { preventScroll: true }. The browser's default focus behavior scrolls the focused element into view, jumping to the portaled content at the bottom of the DOM.
Steps to Reproduce
- Create a page with enough content to scroll
- Place a
Popover component lower on the page (e.g., inside a form)
- Use the default portal behavior (
PopoverContent wraps with Portal + Positioner + Popup)
- Click the popover trigger
- Observe: page scrolls to the top
Expected Behavior
The popover should open positioned near its trigger without causing any page scroll.
Actual Behavior
The page scrolls to the top when the popover opens. On the second open (if you scroll back and click again), it may not scroll because the portaled element is already mounted and focused in place.
Root Cause
In PopoverPopup.js, the popup is rendered inside a FloatingFocusManager:
<FloatingFocusManager
context={floatingContext}
modal={focusManagerModal}
initialFocus={resolvedInitialFocus}
// ...
>When FloatingFocusManager moves focus to the popup (or an element inside it), the browser's native element.focus() scrolls to make the element visible. Since the portal appends to <body>, this scrolls to the top/bottom of the page.
Setting modal={false} on the Popover root does not fix the issue.
Environment
@base-ui/react: 1.3.0- React: 19.2.4
- Browser: Chrome 146
- OS: macOS
Workaround
None found so far. Setting modal={false} does not prevent the scroll.
Suggested Fix
The focus() calls within FloatingFocusManager (or the initial focus logic in PopoverPopup) should use element.focus({ preventScroll: true }) when the popup is portaled, to avoid triggering browser scroll behavior.
Description
When a
Popoveris opened, the page scrolls to the top. This happens because the popover content is portaled to the end of<body>viaPopoverPrimitive.Portal, andFloatingFocusManagercallsfocus()on the popup element without{ preventScroll: true }. The browser's default focus behavior scrolls the focused element into view, jumping to the portaled content at the bottom of the DOM.Steps to Reproduce
Popovercomponent lower on the page (e.g., inside a form)PopoverContentwraps withPortal+Positioner+Popup)Expected Behavior
The popover should open positioned near its trigger without causing any page scroll.
Actual Behavior
The page scrolls to the top when the popover opens. On the second open (if you scroll back and click again), it may not scroll because the portaled element is already mounted and focused in place.
Root Cause
In
PopoverPopup.js, the popup is rendered inside aFloatingFocusManager:When
FloatingFocusManagermoves focus to the popup (or an element inside it), the browser's nativeelement.focus()scrolls to make the element visible. Since the portal appends to<body>, this scrolls to the top/bottom of the page.Setting
modal={false}on the Popover root does not fix the issue.Environment
@base-ui/react: 1.3.0Workaround
None found so far. Setting
modal={false}does not prevent the scroll.Suggested Fix
The
focus()calls withinFloatingFocusManager(or the initial focus logic inPopoverPopup) should useelement.focus({ preventScroll: true })when the popup is portaled, to avoid triggering browser scroll behavior.