I have a floating menu like this
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
Clicking buttons will move focus to those buttons, unless you handle the mousedown event and call
preventDefault on it.
Thank you, this fixes the issue
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…
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.
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