Mention list opens in wrong place initially when using async items function

[jamesmoss]

Description
If you're making an async request to the server in the mentions plugin, it's possible to get the mention list to appear in the wrong place.

Steps to reproduce the bug
Steps to reproduce the behavior:

1. Type @ to open the mentions list
2. Quickly type a letter before the items function has time to resolve. e.g @a
3. You'll notice for a split second the mentions list appears in the top left before snapping to the correct place

CodeSandbox
I created a CodeSandbox to help you debug the issue, it's using the code from the mentions docs except I've added a setTimeout which emulates a 300ms response time from the server.

• React: https://codesandbox.io/s/compassionate-chatterjee-dspxu?file=/src/Tiptap.jsx:477-482

Expected behavior
The mention list always appears next to the cursor.

Screenshot, video, or GIF

Environment?

• operating system: MacOS
• browser: Chrome 92
• mobile/desktop: Desktop
• tiptap version: @tiptap/[email protected]

Additional context
Add any other context about the problem here.