Skip to content

Popper: Fix anchor positioning when using custom anchor #3807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Benrski wants to merge 3 commits into
base: main
Choose a base branch
from
+43 −8
Open

Popper: Fix anchor positioning when using custom anchor #3807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7ca22e1
fix(popper): anchor positioning regression with custom anchor
Benrski Feb 10, 2026
1ce442e
chore: add changeset
Benrski Feb 10, 2026
976f2fb
feat(popover): add CustomAnchorSibling story
Benrski Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-popper-anchor-positioning.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@radix-ui/react-popper': patch
---

Fixed `Popper.Anchor` positioning when `PopoverAnchor` and `PopoverTrigger` coexist as siblings or with CSS absolute positioning
32 changes: 32 additions & 0 deletions apps/storybook/stories/popover.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,38 @@ export const CustomAnchor = () => (
</Popover.Root>
);

export const CustomAnchorSibling = () => (
<Popover.Root>
<Popover.Anchor
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: 250,
padding: 20,
margin: 100,
backgroundColor: '#eee',
}}
>
Item
</Popover.Anchor>
<Popover.Trigger className={styles.trigger} style={{ margin: '0 100px' }}>
open
</Popover.Trigger>
<Popover.Portal>
<Popover.Content
className={styles.content}
side="right"
sideOffset={1}
align="start"
style={{ borderRadius: 0, width: 200, height: 100 }}
>
<Popover.Close>close</Popover.Close>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);

export const WithSlottedTrigger = () => {
return (
<Popover.Root>
Expand Down
14 changes: 6 additions & 8 deletions packages/react/popper/src/popper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,15 +77,13 @@ const PopperAnchor = React.forwardRef<PopperAnchorElement, PopperAnchorProps>(
const ref = React.useRef<PopperAnchorElement>(null);
const composedRefs = useComposedRefs(forwardedRef, ref);

const anchorRef = React.useRef<Measurable | null>(null);
React.useEffect(() => {
const previousAnchor = anchorRef.current;
anchorRef.current = virtualRef?.current || ref.current;
if (previousAnchor !== anchorRef.current) {
// Consumer can anchor the popper to something that isn't
// a DOM node e.g. pointer position, so we override the
// `anchorRef` with their virtual ref in this case.
context.onAnchorChange(anchorRef.current);
// Consumer can anchor the popper to something that isn't
// a DOM node e.g. pointer position, so we override the
// `anchorRef` with their virtual ref in this case.
const desiredAnchor = virtualRef?.current || ref.current;
if (context.anchor !== desiredAnchor) {
context.onAnchorChange(desiredAnchor);
}
});

Expand Down