bug: User mention search does not function properly when typing quickly
nireld opened this issue · 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
Screenshare.-.2024-05-28.9_28_27.AM.mp4
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.
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.
Well, any workaround for now?
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.