search

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
5.98k stars 392 forks source link

Unable to have "focus stealing" components in Suggestion menu and formatting toolbar #654

Open clementprevot opened 4 months ago

clementprevot commented 4 months ago

Describe the bug Hi!

I was trying to fully customize the UI of Blocknote by first replacing the Suggestion menu component (still keeping the controller though).

I was using my own design system component (Fractal, based on RadixUI) to build the slash menu and everything worked fine at first.
But then, I wanted to support "submenus" still using one of my components based on the Popover of RadixUI.
It occurs that RadixUI is using focus trap in there Popover component and this caused an issue with BlockNote: as soon as I hovered the trigger of the Popover, the whole suggestion menu disappeared.

I dig a bit in the BlockNote source code (cloning the repo in local and testing different things in the playground) and quickly realized that it came from this bit of code: when the Popover is shown, RadixUI steals the focus, which in turn triggers a blur event in the suggestion menu plugin which in turn completely hide the suggestion menu.

Getting rid of RadixUI (and thus the focus trap) made the sub-menu display properly, but the first click on an item of the submenu didn't triggered the "onItemClick" function but a blur. However a second click did worked properly 🤔.

To Reproduce Here is a StackBlitz with the full reproduction of the custom suggestion menu that is using Fractal's menu and submenus: https://stackblitz.com/edit/vitejs-vite-x7ytx5?file=src%2FApp.tsx

Misc

YousefED commented 4 months ago

Thanks for filing this. Would it be possible to prevent the Radix UI focus behavior? e.g.: https://github.com/radix-ui/primitives/discussions/915

The thing is, you probably do want the editor to remain focused (instead of the menu), so that the user can start typing and filter results

clementprevot commented 4 months ago

Sadly we can't remove the focus trap behavior when using Radix.

Maybe having some sort of freeze/unfreeze method like in the side menu would be an acceptable solution?

YousefED commented 4 months ago

Sadly we can't remove the focus trap behavior when using Radix.

Why not? Doesn't the method I linked to work?

Maybe having some sort of freeze/unfreeze method like in the side menu would be an acceptable solution?

If we want to support type-to-filter, then I don't think any solution that removes the focus from the editor is viable

YousefED commented 3 months ago

@clementprevot Whilst working on https://github.com/TypeCellOS/BlockNote/pull/652 I noticed it's probably because the Radix Popover uses a Portal. You could try disabling the portal for your popover.

As part of the #652 PR I'll also investigate an issue if you need to keep using portals, and make it easier to integrate Radix / Shadcn

matthewlipski commented 1 month ago

The suggestion menu issue is still unresolved since we need the editor to be focused for the user to type queries, but you might be able to focus formatting toolbar elements now that #718 is merged.