You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Nov 9, 2024. It is now read-only.
I'm encountering an issue with TippyJS where the getReferenceClientRect function doesn't seem to update when the window is resized or scrolled. Here's the relevant code snippet: {isClientRect !== undefined && ( <Tippy content={<TippySuggestion suggestions={suggestions} />} placement="top-start" animation="shift-away" arrow={true} popperOptions={{ modifiers: [{ name: "flip", enabled: false }] }} interactive={true} visible={true} getReferenceClientRect={() => isClientRect} appendTo={() => document.body} trigger="manual" zIndex={99999} className="bg-red-500" /> )}
In this setup, isClientRect represents the correct clientRect from a node paragraph element inside tiptap which is build prose mirror. Despite having the correct clientRect, TippyJS doesn't update it when the window is resized or scrolled.
Steps to Reproduce:
Initialize React TippyJS with the provided configuration.
Resize or scroll the window.
Observe that the tooltip position doesn't update accordingly with the window's changes.
Expected Behavior:
I expect TippyJS to update the getReferenceClientRect function and reposition the tooltip when the window is resized or scrolled. However, it seems to be sticking to the same position, not dynamically updating via the css translate 3d.
Attempts to Resolve:
I've attempted the following to resolve the issue without success:
Using the reference prop and passing Tiptap's editor.
Appending the tooltip to both document.body and Tiptap's editor.
Questions:
Is this behavior expected within TippyJS?
If so, why does it stick to the same position despite updates to the window size or scroll position?
Are there any alternative approaches or workarounds to ensure that the tooltip's position dynamically updates with window changes?
What did work:
Not passing a getReferenceClientRect and using the reference prop to the editor (however this is not the correct position ofcourse)
[Tiptap's own Mentionlist](https://tiptap.dev/docs/editor/api/nodes/mention ) doing the exact same (I think)
Any insights or guidance on resolving this issue would be greatly appreciated. Thank you!
The text was updated successfully, but these errors were encountered:
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.
I'm encountering an issue with TippyJS where the getReferenceClientRect function doesn't seem to update when the window is resized or scrolled. Here's the relevant code snippet:
{isClientRect !== undefined && ( <Tippy content={<TippySuggestion suggestions={suggestions} />} placement="top-start" animation="shift-away" arrow={true} popperOptions={{ modifiers: [{ name: "flip", enabled: false }] }} interactive={true} visible={true} getReferenceClientRect={() => isClientRect} appendTo={() => document.body} trigger="manual" zIndex={99999} className="bg-red-500" /> )}
In this setup, isClientRect represents the correct clientRect from a node paragraph element inside tiptap which is build prose mirror. Despite having the correct clientRect, TippyJS doesn't update it when the window is resized or scrolled.
Steps to Reproduce:
Expected Behavior:
I expect TippyJS to update the getReferenceClientRect function and reposition the tooltip when the window is resized or scrolled. However, it seems to be sticking to the same position, not dynamically updating via the css translate 3d.
Attempts to Resolve:
I've attempted the following to resolve the issue without success:
Questions:
What did work:
Any insights or guidance on resolving this issue would be greatly appreciated. Thank you!
The text was updated successfully, but these errors were encountered: