-
-
Notifications
You must be signed in to change notification settings - Fork 44
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.
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
[Menu] Fix custom anchor positioning #609
Conversation
Netlify deploy preview |
// Therefore, if the anchor is a ref, we need to update the position reference in useEffect. | ||
const resolvedAnchor = typeof anchor === 'function' ? anchor() : anchor; | ||
if (isRef(resolvedAnchor) && resolvedAnchor.current !== registeredPositionReference.current) { | ||
refs.setPositionReference(resolvedAnchor.current); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is flushSync
necessary now, if there will be a flicker?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I haven't noticed it flickering. With the menu initially open, even with 20x CPU slowdown, the popup appears only near the anchor.
const anchorRef = useLatestRef(anchor); | ||
const rerender = useForcedRerendering(); | ||
|
||
const registeredPositionReference = React.useRef<Element | VirtualElement | null>(null); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const registeredPositionReference = React.useRef<Element | VirtualElement | null>(null); | |
const registeredPositionReferenceRef = React.useRef<Element | VirtualElement | null>(null); |
const rerender = useForcedRerendering(); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This doesn't seem to be actually used? It's just in the dep array
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Right, it's a leftover from a previous attempt.
Using the
anchor
prop works only in development mode, when React runs the effect twice. This is because we read the anchor ref in useLayoutEffect, when it hasn't been set yet. Additionally, passing the Element directly didn't work as well.This PR adds an extra effect after the first render, that checks if the ref value changed after useLayoutEffect was called. If so, it calls
setPositionReference
again with the ref value.