search

facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.54k stars 1.66k forks source link

Bug: ComponentPickerPlugin scrolling is buggy - dropdown disappears onScroll #5740

Open JingkangZhang opened 7 months ago

JingkangZhang commented 7 months ago

In some edge cases, the component dropdown plugin cannot be scrolled correctly - if you scroll down, the dropdown disappears. Fairly frustrating user experience.

https://github.com/facebook/lexical/assets/30300487/67a496fc-2cb1-4ea8-ba17-74959612bb2b

Lexical version: live on the playground as of now

Steps To Reproduce

  1. input the text as shown in the video
  2. type '/' to bring up the component picker and scroll down

Link to code example:

The current behavior

see above

The expected behavior

dropdown shouldn't disappear

JingkangZhang commented 7 months ago

From my preliminary investigation, in this unhappy case, isInView here becomes false when the scroll happens and the menu gets closed.

So two monkey patches came to me, that I tested and confirmed would work:

  1. delete the logic to position the dropdown on top - never place it on top. This is not ideal when it's opening up at the very bottom. Well, actually, it just might be that the top px calculation is off - perhaps the calculation is supposed to make sure it doesn't overlap, but it does visually.

    Screenshot 2024-03-20 at 3 14 15 AM Screenshot 2024-03-20 at 3 14 23 AM

  2. could be something wrong with this isTriggerVisibleInNearestScrollContainer function - not clear what is not visible here, and then, why close the dropdown at all on scrolling? So getting rid of the logic entirely seems to work for me.

but yeah, pretty shallow reading of the logic on my end for sure, hope experts can chime in. cc @tylerjbainbridge