Bug: If you add Mentions and your Lexical composer is inside Scrollable area, it auto hides
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 23.9k
- Forks
- 2.2k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 61
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the behavior using the linked CodeSandbox, starting with src/App.tsx and the LexicalTypeaheadMenuPlugin setup. Inspect how the mentions menu responds when its trigger leaves a parent with overflow:auto. Done means the menu no longer auto-hides incorrectly while scrolling within the scrollable composer area, with the reproduction still behaving correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100