username suggestions in textarea when typing @ symbol

[pazoozoo42]

When @ symbol is typed and then any letter after it -- usernames suggestions list is opened at the cursor position. You can select a username from the list with mouse or arrow up and arrow down keys, clicking or pressing Enter on the selected item will paste it to the cursor position

https://user-images.githubusercontent.com/57953386/219991886-cd98d908-edfb-46db-b2d3-d0f8f03dec6e.mov

[Aivean]

Another suggestion (out of scope of this PR, something to think about in the future):

There are too many usernames returned by the 0-1 character queries, so suggestions are not very useful. Instead of showing the top of the global list, we can show more relevant usernames, for example, participants of the current comment thread.

[Aivean]

Found a bug/weirdness. When comment text is restored from local storage, it triggers autocompletion, but with a last character? To reproduce:

• create a comment reply with partial username mention
• refresh the post page
• open that reply

---

Also, sometimes, when entering a post and immediately starting to type the reply, autocompletion doesn't trigger. Not sure how to reproduce reliably.

---

Also, note, all test here are performed with added 500ms latency in dev tools.

[iamwavecut]

Another suggestion (out of scope of this PR, something to think about in the future):

There are too many usernames returned by the 0-1 character queries, so suggestions are not very useful. Instead of showing the top of the global list, we can show more relevant usernames, for example, participants of the current comment thread.

+1 on this one.

The only comment is that we should not, at all, request this local list, as we already have it in the FE storage.

Would reduce amount of requests to the BE drastically and possibly will improve UX.

[Aivean]

Another idea for the future: how about we sort results (that match the query) by the number of user's comments? The rationale is that users that comment more frequently are more likely to be mentioned.

[pazoozoo42]

• changed cache to trie
• Implemented automated highlighting if there's only one item in the list
• changed rate limit

Also, sometimes, when entering a post and immediately starting to type the reply, autocompletion doesn't trigger. Not sure how to reproduce reliably.

• decreased debounce callback time from 100ms to 50ms, it should help

Found a bug/weirdness. When comment text is restored from local storage, it triggers autocompletion, but with a last character?

was able to reproduce, but cannot figure what would be the fix for this yet

[Aivean]

@pazoozoo42

Implemented automated highlighting if there's only one item in the list

Not sure that it works as intended. Right now sometimes the first element is highlighted even there are more items in the list. My guess is that happens, when you type something, get results, select one, then erase what you typed to get a different list.

But anyway, I'd say, we should always highlight the first element (unless other element is already highlighted), even if there are more than one result. Rationale:

1. Saves one keypress
2. No reasons against that
3. Consistency

[Aivean]

Found another bug. Currently for Russian language the component requests completions only for the last character.

[pazoozoo42]

Not sure that it works as intended. Right now sometimes the first element is highlighted even there are more items in the list. My guess is that happens, when you type something, get results, select one, then erase what you typed to get a different list.

it's most probably that it is highlighted by the mouse hover

[Aivean]

it's most probably that it is highlighted by the mouse hover

No, I can consistently reproduce it by:

• starting to type (no selection)
• selecting one of the results
• erasing everything
• starting to type again (selection is already there)

[pazoozoo42]

No, I can consistently reproduce it by: starting to type (no selection) selecting one of the results erasing everything starting to type again (selection is already there)

Is this a blocker?

[Aivean]

Is this a blocker?

No, I don't think so.