add solution#1171
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
The implementation is missing critical functionality that blocks task completion. The debounce mechanism with a customizable delay prop (default 300ms) is completely absent - this is explicitly required by the task description where it states 'suggestions should appear after some delay in typing (debounce)' and 'the delay should be customizable via props'. Without this, the core feature isn't implemented. Additionally, there's a functional bug with the dropdown: using onBlur to close the dropdown and onMouseDown to select creates a race condition where the dropdown closes before selections can register, preventing users from actually selecting suggestions. To fix this, use onClick on suggestion items with e.preventDefault() in the blur handler, or restructure to use onMouseDown with proper event handling.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| specPattern: 'cypress/integration/**/*.spec.{js,ts,jsx,tsx}', | ||
| }, |
There was a problem hiding this comment.
The delay prop is referenced but not implemented. Add a customizable delay prop with a default value of 300ms for the debounce functionality as required.
| const filteredPeople = useMemo(() => { | ||
| if (!normalizedQuery) { | ||
| return peopleFromServer; | ||
| } | ||
|
|
||
| return peopleFromServer.filter(person => | ||
| person.name.toLowerCase().includes(normalizedQuery), | ||
| ); |
There was a problem hiding this comment.
Missing debounce implementation - The task explicitly requires: 'suggestions should appear after some delay in typing (debounce)' and 'the delay should be customizable via props (default value is 300ms)'. Currently, filtering happens immediately on each keystroke with no delay.
| interface AppProps { | ||
| onSelected?: (person: Person) => void; |
There was a problem hiding this comment.
Missing delay prop - The task requires 'the delay prop should be customizable via props (default value is 300ms)'. There's no delay prop defined in the AppProps interface.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation is complete and correctly addresses all requirements. The debounce mechanism with customizable delay prop is properly implemented using useRef for the timer, and the dropdown selection race condition is resolved by using onMouseDown with event.preventDefault() to prevent the blur handler from closing the dropdown before selection registers. All checklist items are satisfied including proper handling of spaces-only input, stable keys from person.slug, and correct React event handler naming conventions. Great work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
DEMO LINK