Suggestion Menu is not positioned properly when custom items or custom components are specified

[rantingmong]

Describe the bug

I tried adding a simple BlockNoteView with slashMenu set to false and having a SuggestionMenuController configured below:

        <SuggestionMenuController
          getItems={async (query) => customSlashMenuItems}
          triggerCharacter={"/"}
        />

customSlashMenuItems is just a list of DefaultReactSuggestionItem.

When opening the suggestion menu via the trigger character, the menu sometimes will appear on a position that is far away from the cursor. See video below:

https://github.com/user-attachments/assets/1f420d57-52a1-4ee2-bc96-c7ffbe77772f

The bug appears regardless if shadcn or mantine is used.

To Reproduce

• Create a basic NextJS app
• Add @blocknote/core @blocknote/react and @blocknote/shadcn or @blocknote/mantine
• Added a BlocknoteView with the scenario described above

Misc

• Node version: v20.12.1
• Package manager: npm 10.8.1
• Browser: Arc 1.51 but also occurs in Safari 18
• [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[matthewlipski]

Just leaving a note - after basic testing this issue looks to be specific to NextJS

[YousefED]

Just leaving a note - after basic testing this issue looks to be specific to NextJS

Sounds unlikely to me, but would be very interesting. I think when all code is loaded on the client, it's very unlikely that there's a difference in behavior as the code should be the same. Could it be a CSS issue instead? What makes you think it's specific to next?

[matthewlipski]

IIRC I tested in both a local React project and a NextJS one and could only get it reproduced on NextJS. Agree though that it would be really weird for that to be the root cause. I don't think it's CSS because the positioning gets handled by FloatingUI, which sets inline styles. If anything, it would be due to FloatingUI getting the wrong reference position from the DOM.