bug: User mention search does not function properly when typing quickly

[nireld]

Describe the bug

User mention search does not function properly when typing quickly in the message input field.

To Reproduce

Set up the chat client with the following configuration:

<Chat client={client}>
    <Channel channel={channel} Attachment={CustomAttachment}>
        <Window>
            <ChannelHeader />
            <MessageList />
            <MessageInput 
                mentionAllAppUsers={true} 
                doImageUploadRequest={uploadFile} 
                doFileUploadRequest={uploadFile} 
            />
        </Window>
        <Thread />
    </Channel>
</Chat>

Note the use of mentionAllAppUsers={true} in the MessageInput component.

Ensure there are at least 10 users in the GetStream database.

Start mentioning a user by typing '@' followed by the user's name quickly.

Expected Behavior

The mention suggestions should update in real-time as each character is typed, displaying relevant user matches.

Observed Behavior

If the server returns the result after an additional character is typed in the textbox, the result is ignored. This leads to inconsistent or missing mention suggestions.

The specific ignoring line -
https://github.com/GetStream/stream-chat-react/blob/bffcf77469629846a93590e2619917ac698ce24c/src/components/AutoCompleteTextarea/Textarea.jsx#L359C10-L359C11

The issue is related to the debounce mechanism in the queryUsers function. When typing quickly, the debounce causes incomplete text queries to be sent, leading to ignored results.

Attaching video

Screenshare.-.2024-05-28.9_28_27.AM.mp4

[MartinCupela]

The reason, why the last typed characters are actually not used to query a new result is that the SDK is waiting, until the previous query finishes. The logic is embedded inside the query function that is throttled on top of that. The problem here, is that the throttle mechanism does not work, because the function is recreated on each new change event. So it seems that the purpose of waiting for the request to finish was to actually protect from the error of too many requests, that would otherwise be returned by the back-end.

[MartinCupela]

This issue is a symptom of a wider problem. The MessageInput component will need a refactor so that it is not re-rendered multiple times on every key stroke.

[nireld]

Well, any workaround for now?

[MartinCupela]

Hey @nireld. Unfortunately we do not have workaround for this at the moment. This is an architectural problem of a monolith component that unnecessarily re-renders. We will discuss the issue with our product team to see, whether we can advance the solution.

[LoyerAmandine]

Hey @MartinCupela , we're facing the same issue on a larger scale, particularly with user search, which is very critical for us. It's causing a lot of friction as our users are reporting bugs related to this problem. Given that we rely on a chat partner like GetStream to minimize in-house development, this is a major blocker. I've also created a support ticket but haven't received any updates yet. Appreciate your feedback and any progress on this! (request #54638)

[MartinCupela]

Hey @LoyerAmandine , your request seems related to another component. We have replied to your request.