Show floating UI only when editor is focused

1

Hello :wave:

I have a floating menu like this

image
image1028×158 18.3 KB

And I’m trying to hide it on editor’s blur. I’ve found this discussion Handling focus in plugins and managed to hide it but now it hides even when I try to click on buttons inside menu. This happens because floating menu component is outside of prosemirror view’s node

Any advices how to achieve desired behaviour?

Thanks in advance

2

Clicking buttons will move focus to those buttons, unless you handle the mousedown event and call preventDefault on it.

1 Like
3

Thank you, this fixes the issue :+1:

But now seems like I need to re-implement keyboard navigation in floating menu since it won’t work without browser’s default focus behavior…

4

Sounds like closing the UI when the editor isn’t focused is exclusive with allowing keyboard focus navigation through it, so yeah, you’ll probably have to change the way focus impacts menu visibility.

5

For those who might be interested in this as well:

I’ve found some inspiration in TipTap’s extension for bubble menu tiptap/bubble-menu-plugin.ts at main · ueberdosis/tiptap · GitHub . They set one-time ‘preventHide’ flag on captured mouse down event so bubble menu “skips” blur event caused by clicks on menu and still support a11y