I only manage to finish 2 out of the 3 things I planned to finished on this sprint. Didn't have much spare time to work with the issues I mentioned in the sprint 4 planning. Though it still worse than I anticipated, while working on this with time constraint, my expectation was I only have time to finish 1 and partially finish another. But managed to able to create a 2nd pull request.
To begin with, the first issue I resolve is the moving popup menu on the chat message box Issue#827. This one wasn't particularly hard to resolve. All I needed to do it put the pop menu on its on flex container so it doesn't depend on a dynamically changing container.
Before:
After:
After this one, I moved on to the autocomplete suggestions for the list of commands Issue#840. When initially typing "/" in the input box, a suggestion window shall open showing all of the command. As the user progressively type, it will narrow down the suggestion based on the input. Originally in the issue, they suggested a integrated features from chakra-autocomplete. This would have been nice to use, since it would make implementing this easier and nice features along with it. But it had dependencies issues with the project version of chakra. So this wasn't an option even though I would have liked to use this.
So instead I had to implement my own version of the autocomplete. For the most part I needed to open a window of suggestions based on the user input. Using useeffects to dynamically check the user input and use the value got from that to list the command suggestions that starts with the user inputs.
I decided to design it similar to how discord is doing it. As that was also the example used posted in the issue. Each commands on the list has the command an then the description of the command below it.
I find this visually appealing and also give information about the command frontally.
Overall, this issue wasn't too much of a problem to work on. I thought making it myself would be hard since I wasn't able to use an already made library. But if I break it apart piece by piece, it is less daunting of a task. It is basically a window that pops up when their is an onchange on the input box and what is being suggested is just finding the ones that starts with what the user has inputted.
Demo:
Top comments (0)