Bug: If you add Mentions and your Lexical composer is inside Scrollable area, it auto hides

[mahavirn]

If you add LexicalTypeaheadMenuPlugin and your Lexical composer is inside Scrollable area, it auto hides when the Mention Trigger goes out of frame in scrollable container.

Demo:

It happens when parent element have overflow:auto property.

Code Sandbox Link: https://codesandbox.io/p/sandbox/mentions-plugin-lexical-dummy-7-forked-k83wy6?file=%2Fsrc%2FApp.tsx%3A8%2C36

You can try removing the overflow:auto property from parent div and see the different behaviour.

[D-Raj-Grg]

+1

I think actual behaviour should be " it goes with scroll or when user scroll up it should pop up again !"

[pleunv]

The Typeahead anchor indeed seems to disappear on almost the briefest scroll when the editor or a parent has an overflow set, it doesn't even have to scroll past the overflow area. Removing the overflow completely eliminates the problem, but is of course often not an option.

[Seolhun]

I think you can change the LexicalTypeaheadMenuPlugin parent props. This approach may vary depending on where you render it, but if you specify the rendering area and style correctly, it should resolve the issue.

https://github.com/facebook/lexical/assets/16330024/2a63134b-c2fa-48aa-9648-5ad8e1aacfe8