Autocomplete was implemented #763
Conversation
NazariiAlieksieiev
commented
Oct 17, 2024
NazariiAlieksieiev
commented
- DEMO
There was a problem hiding this comment.
Great job on the implementation! 🎉 While there are a few minor naming convention issues and a potential performance consideration, they don't critically impact the functionality. Keep up the good work and consider the feedback for future improvements! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| </div> | ||
| <DropdownMenu | ||
| people={people} | ||
| onSelectedPerson={setSelectedPerson} |
There was a problem hiding this comment.
The prop 'onSelectedPerson' does not follow the recommended naming conventions for event handler functions in React. According to the checklist, it should be named using the 'handle' prefix, such as 'handleSelectedPerson'.
| ); | ||
|
|
||
| const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| applyQuery(event.target.value); |
There was a problem hiding this comment.
The filter should not be called if the user enters spaces only. Consider trimming the input value and checking if it is not empty before calling applyQuery.
| style={{ cursor: 'pointer' }} | ||
| className="dropdown-item" | ||
| data-cy="suggestion-item" | ||
| key={person.slug} |
There was a problem hiding this comment.
Generating keys during render can lead to performance issues and unexpected behavior. Ensure that the key is stable and unique for each item, and not generated dynamically during render.
| [], | ||
| ); | ||
|
|
||
| const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => { |
There was a problem hiding this comment.
Consider following the naming conventions for event handler functions in React. For example, prefix the function name with 'handle' or 'on'.
