Bug: Dropdown misplacement after scrolling

[paigekim29]

Lexical version: v0.12.4

Steps To Reproduce

1. After package deployment, add the lexical editor to the necessary location.
2. Assuming the lexical editor is not at the top of the page but rather positioned at a specific part of the page after scrolling, when the toolbar's dropdown button is clicked, the dropdown appears not directly at the bottom of the toolbar but somewhere in the middle of the page.

The current behavior

https://github.com/facebook/lexical/assets/70982342/93cba508-4df2-4c2b-9965-4d555d6ef77b

The expected behavior

https://github.com/facebook/lexical/assets/70982342/104329a5-7565-4b4f-955a-d4fc627af708

[thorn0]

You might have conflicting styles in your page that use the dropdown class or something else that breaks position: fixed of the dropdown.

[pk936]

Try this:

In BlockOptionsDropdownList component in ToolbarPlugin, write useEffect like this:

useEffect(() => {
    const toolbar = toolbarRef.current;
    const dropDown = dropDownRef.current;

    if (toolbar !== null && dropDown !== null) {
      const toolbarPos = toolbar.getBoundingClientRect();
      const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      dropDown.style.top = `${toolbarPos.top + 40 + scrollTop}px`;
      dropDown.style.left = `${toolbarPos.left + scrollLeft}px`;
    }
  }, [dropDownRef, toolbarRef]);

[parrad0]

Try this:

In BlockOptionsDropdownList component in ToolbarPlugin, write useEffect like this:

useEffect(() => {
    const toolbar = toolbarRef.current;
    const dropDown = dropDownRef.current;

    if (toolbar !== null && dropDown !== null) {
      const toolbarPos = toolbar.getBoundingClientRect();
      const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      dropDown.style.top = `${toolbarPos.top + 40 + scrollTop}px`;
      dropDown.style.left = `${toolbarPos.left + scrollLeft}px`;
    }
  }, [dropDownRef, toolbarRef]);

This solved the problem for me