solution

[aakash1sadhu]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

Great work on implementing the autocomplete component! The core functionality like debouncing and filtering is well done. However, I'm requesting a couple of changes to improve the user experience and robustness.

1. Dropdown closes too quickly: When the suggestion list requires scrolling, the onBlur event on the input field closes the dropdown immediately. This prevents users from clicking the scrollbar or an item that's further down the list. A common solution is to wrap the call that closes the dropdown inside a setTimeout within your onBlur handler. This small delay allows the onClick event on a suggestion to register before the list disappears.

2. Re-focusing the input: After selecting a person, if you click back into the input field, it only shows the currently selected person as a suggestion. The expected behavior is to show the full list of people again, making it easier for a user to change their selection without having to first delete the current text.

Fixing these interaction issues will make your component much more polished and user-friendly. You're very close to a perfect solution!

---

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

Review Summary

Good progress on the component! The core filtering and debouncing logic is solid. However, I'm requesting changes because two key user experience requirements are not yet met.

First, the suggestions dropdown doesn't close when you click away from it. To fix this, please restore the onBlur handler but delay hiding the list slightly, which gives the onClick event time to register. For example:

onBlur={() => {
  setTimeout(() => {
    setIsActive(false);
  }, 200);
}}

Second, when a user selects a person and then clicks back into the input, the full list of people should be displayed again. You can achieve this by resetting the filter when the input gains focus by calling setLastQuery('') inside the onFocus handler.

Fixing these two issues will make the component behave as expected. You're very close!

---

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

Review Summary

Excellent work on this submission! You've successfully addressed all the feedback from the previous review, and the component now functions perfectly. The handling of focus and blur events to show and hide the suggestions is implemented very well, and the debouncing logic is spot on. Your code is clean, well-structured, and meets all the requirements of the task. I am approving your solution, great job!

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Footnotes

1. Rate AI review example ↩