[Suggestion utility] Outdated items promise resolutions should be ignored

[Maximaximum]

What’s the bug you are facing?

The problem with the current Suggestion utility is that it does not seem to properly handle renderer.items(props) return values when they are promises.

Imagine a situation when the user puts the cursor into the tiptap editor, and then subsequently types @, then J, o, h (so that eventually the content in the editor becomes @Joh. So, the renderer.items function gets called 3 times, with these props.query values: J, Jo, Joh. Let's assume each of the calls return a Promise.

Now, imagine a race condition so that these 3 Promises are resolved in an order that is different from the original renderer.items calls order. Ie, they are resolved in the order: Jo, then Joh and eventually J.

Now, the problem is that in such case the renderer.onUpdate() function will be called in the Jo, Joh, J order (according to the order of promise resolutions). Which effectively means that eventually the suggestion popup will render the J query result, not the Joh query result, which is not the expected behavior.

This is the diagram of the actual behavior:

user input          =  J----------------Jo---------------Joh---------------------------------------
promise resolutions =  ------------------------20items(Jo)----------19items(Joh)---------80items(J)
rendered output     =  ------------------------20items(Jo)----------19items(Joh)---------80items(J)

Instead, the expected behavior would be:

user input          =  J----------------Jo---------------Joh---------------------------------------
promise resolutions =  ------------------------20items(Jo)----------19items(Joh)-------------------
rendered output     =  ------------------------20items(Jo)----------19items(Joh)-------------------

So, if a promise is resolved after any of its subsequent promises have been resolved, its value should be ignored (renderer.onUpdate should not be called).

Or, another way to say it: whenever a promise is resolved, the lib should stop listening to any of the previous unresolved promises.

One more note: it might seem that these race conditions should be handled by the code that uses the Suggestion util, but IMHO this is a behavior that everyone would expect from using the Suggestion util in any scenario. Unless I'm missing something.

How can we reproduce the bug on our side?

Just open the codesandbox provided

Can you provide a CodeSandbox?

https://codesandbox.io/s/tiptap-mention-promise-bug-reproduction-6yvvu1?file=/README.md

What did you expect to happen?

The expected behavior would be:

user input          =  J----------------Jo---------------Joh---------------------------------------
promise resolutions =  ------------------------20items(Jo)----------19items(Joh)-------------------
rendered output     =  ------------------------20items(Jo)----------19items(Joh)-------------------

So, if a promise is resolved after any of its subsequent promises have been resolved, its value should be ignored (renderer.onUpdate should not be called).

Or, another way to say it: whenever a promise is resolved, the lib should stop listening to any of the previous unresolved promises.

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[rfgamaral]

@Maximaximum Wondering if you could follow this pattern (or similar) to work around this issue? Ideally this would be fixed in the Suggestion utility, but until then, maybe that pattern will help you?

[Maximaximum]

@floriankrueger I’ve created this ticket specifically for fixing the issue in the Suggestion utility, because otherwise the utility seems to be malfunctioning.

Handling the issue outside of the utility might work as a temporary solution, but the issue itself should be fixed in the utility IMHO.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.