Bug: LexicalMenu typeahead-menu leaves dangling DIVs which can prevent clicks

[etrepum]

LexicalMenu leaves empty DIVs in the DOM that can interfere with interacting with the elements beneath them. I think the root cause is in useMenuAnchorRef and its strange way of managing the created DIV with refs in the render path.

Follow-up from #7655 (review)

Possibly a regression from #6794 - it does seem that v0.19.0 did not have this issue (playground)

Looks like #6794 is unrelated because it works up to the v0.24.0 playground - looks like the bug was initially in the v0.25.0 playground

Most likely regression now is possibly #7185 or #7181 since the v0.25.0 release doesn't have any other lexical-react changes listed. #7181 does things in the render path so it's probably our culprit.

Lexical version: 0.32.1

Steps To Reproduce

1. Clear editor
2. type /ch and press return to create a Check List from the ComponentPicker
3. Type 'a' enter 'b' enter to create two check list items
4. Try and click the second checkbox or inspect the DOM to find a dangling DIV that's in the way

The current behavior

<div aria-label="Typeahead menu" role="listbox" style="display: block; position: absolute; left: 216px; height: 17.5px; width: 21.0938px; top: 166.273px;"></div>

The expected behavior

No dangling DIV. Probably shouldn't even be mounted at all until there's something to render in that portal?

Impact of fix

LexicalMenu usage will be more reliable (although hopefully we'd get rid of most of this code via #7623 or a similar floating-ui effort)

[ivailop7]

I can confirm my PR should fix this. Should have time to finish it in the next few weeks.

[etrepum]

I have a targeted fix in #7669