Closing an open @tiptap/suggestion on editor blur

[tom2strobl]

What problem are you facing?

Hi, first of all – thanks for the hard work!

I'm using the react flavor, although this shouldn't make a difference really. Both the mentions example (https://tiptap.dev/api/nodes/mention) and the lower level @tiptap/suggestion don't close an open suggestionList when the editor loses focus, which, from a UX perspective is kinda weird since blur on an editor means the user is not interested to interact with its contents anymore and the list-component should not be shown anymore.

Now there is onExit on the suggestion.render function, but I'm assuming that it only applies when the whole editor is unmounted. There is onUpdate, but focus/blur events are not triggering an update as far as I can tell, it really only updates when the editors contents are updated.

There is the onBlur event on extension level that could be used I think, but I'm struggling to trigger the focus change down to update the suggestion.render (to component.destroy) or the SuggestionList-Component itself (to hide temporarily).

What’s the solution you would like to see?

A straightforward way to bubble focus updates down to extensions or if already kinda accessible, a better documentation on how to do so.

An onFocusChange-event in suggestion.render would likely be the most ergonomic as then one only needs to component?.updateProps further and nothing else. Is this doable in userland?

What alternatives did you consider?

As stated above I tried to leverage the suggestion.render function and its event handlers, but failed to get focus events in those.

I understand that there is onBlur on editor level, but fail to understand how to trigger a state change in the extension. Is the correct way to implement addCommands() in the extension and then call it from within onBlur? If so, how do I trigger an update, or does every command trigger a view update?

Anything to add? (optional)

I'm open to any feedback on how to update focus state from editor level to component level, maybe its not as complicated after all and I just didn't get it :-)

Again in any case – thanks for the hard work!

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖