Skip to content
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

TippyJS not Updating getReferenceClientRect on Window Resize or Scroll #387

Open
gijzy opened this issue Jan 28, 2024 · 0 comments
Open

Comments

@gijzy
Copy link

gijzy commented Jan 28, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant