Unable to scroll on suggestion menu controller.

[ITHELOKI]

I scroll on the homepage demo editor, im using brave browser, i can't scroll, once i click to scroll, it gets hidded/destroyed.

NOTE: i tryed to fix it/debug, but have no idea why this happens, i tryed to remove the onblur event 'OnCustomHandle' attached to the .bn-editor and it works, but i don't know how to keep it that way. tryed to mess with index.js which has this event, and no luck. reinstalled everything, no luck.

here's the code i run in the brave browser console to fix... but doesn't last...
export default function removeBlur() {
const editorElement = document.querySelector('.bn-editor');
if (!editorElement); // Ensure the element exists
const listeners = getEventListeners(editorElement).blur;
console.log('REMOVED', listeners[0].listener)// Get blur listeners
editorElement.removeEventListener('blur', listeners[0].listener); // Remove second listener
}

i afraid adding this could result in more bugs for other browsers... i would really appreaciate a response. i just can't change blocknotejs with any other editor, including, tiptap, lexical, yoopto... wethever it is. blocknotejs is the future.

Misc

• Node version: v21.6.2
• Package manager: npm
• Browser: brave

[yoni1342]

The same issue here. In my case components.Generic.Menu.Item scroll is not working

[ITHELOKI]

hey again, @YousefED i can't believe i solved it, it took 5 days, here's what i tryed:
1/ messing with index.js prosemirror view initview function... for [2 days].
2/ messing with blocknotejs [took 1 day]
3/ messing with console logging, tough to cut the event while it the suggestion menu is open and asign them againe when it's closed, realized it's impossible to do that with code, only in debugging mode. took 2 days of trying

now is the sixth day. im super tired, i didn't want to change blocknotejs, cause i just love it man. you've built something really cool here.

this is the solution to fix it, you know it's ironic... don't laugh at me tough, i didn't give up.
i made a customslashmenu. and added in the wrapping div.
tabIndex={0} // Allow focus
onMouseDown={(event) => event.preventDefault()}
onClick={(event) => event.preventDefault()}

yes, it was that simple. stop laughing.

either way, here's the full code:
"use client"; // this registers as a Client Component
import "@blocknote/core/fonts/inter.css";
import {
DefaultReactSuggestionItem,
SuggestionMenuProps,
SuggestionMenuController,
useCreateBlockNote,
} from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";

// Our component we can reuse later
export default function DaoEditor() {
// Creates a new editor instance.
const editor = useCreateBlockNote({
defaultStyles: false,
});

// Custom component to replace the default Slash Menu.
function CustomSlashMenu(props: SuggestionMenuProps) {
return (
<div
className="slash-menu max-h-[264px] min-w-[184px] overflow-auto rounded-sm bg-zinc-950/[0.98] p-2.5 pointer-events-all"
tabIndex={0} // Allow focus
onMouseDown={(event) => event.preventDefault()} // Prevent default to maintain menu open state
onClick={(event) => event.preventDefault()} // Pass the event explicitly
>
{props.items.map((item, index) => (
<div
key={index} // Add a unique key here. Preferably use a unique identifier from the item.
className={slash-menu-item rounded-[3px] ${ props.selectedIndex === index ? "bg-zinc-800 selected text-white" : "text-zinc-400" }}
onClick={() => {
props.onItemClick?.(item);
}}
>

{item.icon}

{item.title}

))}

);
}

return (
<BlockNoteView editor={editor} theme={"light"} slashMenu={false}>
<SuggestionMenuController
triggerCharacter={"/"}
suggestionMenuComponent={CustomSlashMenu}
/>

);
}

[fscs64]

Any update?