Bug: Menu Selection and Scrolling Misbehavior in Limited Lexical Editor Space

[ssu2030]

Lexical version: 0.21.0

Steps To Reproduce

In the Lexical playground, when using (/) to pop up a menu list, an issue occurs when selecting an item from the menu list. This issue is not problematic if the Lexical editor is sufficiently large. However, if the size of the Lexical editor is smaller than the size of the menu list, the following issues occur during the menu selection process:
1. The selection behaves unexpectedly, with the first menu item always being selected regardless of the intended choice.
2. Additionally, issues arise while scrolling down to select menu items lower in the list.

The current behavior

lexical.error.case.mov

lexical.test.mov

The expected behavior

I expect the menu list to function correctly even when the Lexical editor has insufficient space. Specifically, the menu list size should dynamically adjust based on the available space occupied by the Lexical editor. For example, setting a dynamic max-width for the menu list might be necessary.

Additionally, the process of opening the menu list via React Portal attaches the menu to the body, which unintentionally creates a scrollbar on the body. This issue does not occur in the playground but might arise in other implementations.

A similar plugin, LexicalNodeMenuPlugin, accepts a parent prop to attach the menu under a specific parent instead of the body. However, it seems that the useMenuAnchorRef logic used for positioning the menu still calculates the position incorrectly, leading to misaligned menu placement. This also requires improvement.

If I am not using the plugin correctly, I would appreciate any clarification. I truly value this excellent library and am enjoying using it. These suggestions are provided in the hope of improving the library’s functionality and user experience. Currently, without resolving the menu list issue, it seems Lexical works properly only in areas with sufficient space, which feels restrictive.

Impact of fix

How severe is this bug? How often does it happen? Is it causing an outage somewhere?

This bug is moderate in severity but significantly impacts usability in specific scenarios. It occurs consistently when the size of the Lexical editor is smaller than the menu list, particularly in constrained environments. While it does not cause a full outage, it creates a poor user experience and functional limitations, especially when users need to interact with the menu in smaller editor spaces.

Who would benefit from this fix? Any specific users, groups, or companies?

This fix would benefit developers and teams who are integrating Lexical into projects with dynamic or responsive layouts where the editor’s size is constrained. Companies building rich-text editing features into their applications—such as content management systems, collaborative tools, or learning platforms—would see improved usability and flexibility. The improvement would also make Lexical a more viable option for developers working on UIs with smaller or dynamically resized editor areas.

If possible, include metrics. Approximately how many users would this fix benefit?

While the exact number of users affected depends on adoption metrics for Lexical, this issue could impact any project that integrates Lexical with a dynamic layout. The fix would enhance usability across potentially thousands of applications and teams leveraging Lexical for its rich-text editing capabilities, especially in mobile or responsive environments.