stream-chat-react icon indicating copy to clipboard operation
stream-chat-react copied to clipboard

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

Open nireld opened this issue 1 year ago • 6 comments

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

https://github.com/GetStream/stream-chat-react/assets/139216497/1a5b416f-28da-4600-bdad-d6e3e1c95894

nireld avatar May 28 '24 06:05 nireld