mui / mui/base-ui

[popover] Allow `Positioner` parts to be omitted for native CSS anchoring

Open
#1,663 2 comments 0 reactions 0 assignees View on GitHub
component: popover type: enhancement
Dominant language
TypeScript
Stars
10.9k
Forks
545
Avg merge
2d 1h
Merged PRs (30d)
114

Description

When trying to use native CSS anchor positioning by simply omitting the `Positioner` part to position `Popup` with CSS `anchor`, an error is thrown:

> Base UI: PopoverPositionerContext is missing. PopoverPositioner parts must be placed within .

Native CSS Anchoring doesn't support `Arrow` yet, but it can optionally consume the context instead of throwing for future use. `Popup` doesn't need to consume the positioner context at all (`FloatingFocusManager` can work with `FloatingRootContext` from the root instead).

This way, the Floating UI logic doesn't need to be included in the bundle once CSS anchoring is widespread if they just omit the `Positioner` part in their JSX.

Contributor guide

Open the contributing guide

Research direction

Start by tracing the Popover.Positioner and Popup parts, especially PopoverPositionerContext and FloatingFocusManager. Check how omitting Positioner currently triggers the missing-context error, then verify that CSS anchor positioning works without Floating UI while Arrow can consume the context when present.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.