🕺💃 WOOHOO!!! I made it! DIY-ed my own autocomplete @mention component
The autocomplete was pasting the text after the user's text input, not replacing over it. There were a few solutions that involved tracking and finessing cursor position and index positions of strings/substrings, which felt pretty convoluted even though it used all Javascript functions. I found a better one - using regex to track the entire textarea's input, and just replace the @ or @... with the selected username from the dropdown menu tooltip. Heard it might be less performant, but well...I'm not optimizing for that (yet, if ever). Optimizing for speed and DX 🤷♂️ Pretty proud of myself to have solved this!
document.getElementById("textarea").value.replace(/@(\w+)$|@$/)
Spaghetti code here (sorry no time to refactor yet)👇🏻
https://codepen.io/jasonleow/pen/jOVaeXd
[Update:] Also had to deconflict the input coming from mouse click vs arrow+enter key. This has got to be one of the most complex UI interactions I had to create and test for. Everyday I'm finding edge cases to debug! Not even launched yet, so can't imagine if users will find more when it's out in the wild! 😵
document.getElementById("textarea").value.replace(/@(\w+)$|@$/)
Spaghetti code here (sorry no time to refactor yet)👇🏻
https://codepen.io/jasonleow/pen/jOVaeXd
[Update:] Also had to deconflict the input coming from mouse click vs arrow+enter key. This has got to be one of the most complex UI interactions I had to create and test for. Everyday I'm finding edge cases to debug! Not even launched yet, so can't imagine if users will find more when it's out in the wild! 😵
Jason Leow
Author
Thanks! Trying to figure out the last bit now, how to show the dropdown menu tooltip where the cursor is! It's crazy how hard it is (for me)
Please sign in to leave a comment.