Skip to content
This repository was archived by the owner on Nov 9, 2024. It is now read-only.
This repository was archived by the owner on Nov 9, 2024. It is now read-only.

TippyJS not Updating getReferenceClientRect on Window Resize or Scroll  #387

Open
@gijzy

Description

@gijzy

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions