solution by danf4691 · Pull Request #1142 · mate-academy/react_autocomplete

danf4691 · 2026-03-29T21:53:22Z

mateacademy-ai-mentor

Review Summary

You've built a solid foundation for the autocomplete component, but I'm requesting changes because several key requirements are not met and there are critical bugs that break the functionality.

Here are the main issues to address:

Broken Debounce Logic: In src/App.tsx, you're calling applyQueryDebounce.flush() inside handleQueryChange. This forces the function to run immediately on every keystroke, which defeats the purpose of debouncing. The suggestions should only appear after the user has paused typing.
Incorrect Selection Behavior: The requirements state that selecting a person should save their name to the input. Your current implementation clears the input field instead.
Missing and Incorrect Features:
- The debounce delay is hardcoded. It needs to be a customizable prop with a default value of 300ms.
- When no matches are found, the component incorrectly shows the full list of people instead of the 'No matching suggestions' message.
- Filtering is triggered even when the input contains only spaces, which violates a checklist requirement.
Failing CI Workflow: The test.yml workflow has an invalid flag (-l) in the npm test command and an incorrect path for the test reports, which will cause the CI build to fail.

Please address these points, and I'll be happy to take another look!

✨ 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.

mateacademy-ai-mentor · 2026-03-29T21:56:53Z

.github/workflows/test.yml

+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1


It's a good practice to use the latest versions of GitHub Actions to benefit from new features, bug fixes, and security updates. Consider updating actions/checkout@v2 to v4 and actions/setup-node@v1 to v4.

mateacademy-ai-mentor · 2026-03-29T21:56:53Z

.github/workflows/test.yml

+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm test -- -l


The -l flag is not a standard option for npm test or the Cypress test runner. This might be a typo and could cause the test execution to fail. Please verify if this flag is needed or remove it.

mateacademy-ai-mentor · 2026-03-29T21:56:53Z

.github/workflows/test.yml

+        uses: actions/upload-artifact@v4
+        with:
+          name: report
+          path: reports


The path for the test reports seems to be incorrect. Your cypress.config.ts specifies raw_reports as the output directory (reportDir), but this step is trying to upload from reports. This will likely result in no report being uploaded.

mateacademy-ai-mentor · 2026-03-29T21:56:53Z

src/App.tsx

+    );
+  }
+
+  return preparedSuggestions || people;


When preparedSuggestions is an empty array (i.e., no matches are found), this expression incorrectly returns the full people array. It should return preparedSuggestions (the empty array) so that the UI can show the 'No matching suggestions' message.

mateacademy-ai-mentor · 2026-03-29T21:56:53Z

src/App.tsx

+  );
+
+  const suggestions =
+    query.trim() || isInputFocused


This logic causes getSuggestions to be called even when the input contains only spaces, as long as the input is focused. This violates checklist item #1: "make sure that filter won't be called if user entered spaces only". The filtering should not be triggered for whitespace-only input.

mateacademy-ai-mentor · 2026-03-29T21:56:53Z

src/App.tsx

+
+  const handleSelectPerson = (person: Person) => {
+    setSelectedPerson(person);
+    setQuery('');


According to the requirements, selecting a person should "save selected suggestion text to the input". This implementation clears the input field instead.

mateacademy-ai-mentor · 2026-03-29T21:56:53Z

src/App.tsx

+    debounce((value: string) => {
+      setQuery(value);
+      setSelectedPerson(null);
+    }, 300),


The debounce delay is hardcoded here. The task requires this delay to be customizable via props, with a default value of 300ms.

mateacademy-ai-mentor · 2026-03-29T21:56:53Z

src/App.tsx

+  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    applyQueryDebounce(event.target.value);
+    setSelectedPerson(null);
+    applyQueryDebounce.flush();
+  };


This event handler has a couple of issues:

Calling applyQueryDebounce.flush() immediately negates the purpose of debouncing. It forces the function to execute on every keystroke, rather than waiting for the user to pause typing.

The call to setSelectedPerson(null) here is redundant, as it is already being called inside the debounced function. All related state updates should happen together inside the debounced callback.

mateacademy-ai-mentor

Review Summary

Excellent progress on this task! You've fixed all the major issues from the last review, and the component is now very close to meeting all requirements.

I'm requesting one change before approving. The main issue is that the suggestions list doesn't close after a user selects an item, which is a key requirement. In src/App.tsx, the dropdown has a permanent is-active class. This should be controlled by a state variable instead. When a user makes a selection in handleSelectPerson, you should update that state to hide the dropdown.

This fix will also likely resolve the failing Cypress test. You're very close to the finish line!

✨ 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.

mateacademy-ai-mentor · 2026-03-29T22:26:46Z

src/App.tsx

+            : `${selectedPerson.name} (${selectedPerson.born} - ${selectedPerson.died})`}
        </h1>

        <div className="dropdown is-active">


This dropdown remains active permanently, which prevents it from closing when a user selects an item—a key requirement. The is-active class should be toggled based on a state variable (like isInputFocused). To complete the logic, the handleSelectPerson function will also need to update this state to hide the dropdown after a selection.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
_{[CODE: NCM]}

If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.

mateacademy-ai-mentor

Review Summary

Excellent work on this component and for addressing the previous feedback! I am approving this submission as an educational override to help you progress, but there are a few important issues to review for your next iteration.

In src/App.tsx, there's a bug where clicking a suggestion causes it to be immediately cleared. This happens because the onBlur event handler calls flush(), creating a race condition. Also, the search query should be trimmed to handle inputs with leading or trailing spaces correctly. Finally, the test failure indicates that the suggestion list doesn't reopen after a selection is made, which points to a state management issue.

Addressing these points will make your component much more robust. You're doing a great job, keep it up!

✨ 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.

mateacademy-ai-mentor · 2026-03-29T23:43:46Z

src/App.tsx

-  const { name, born, died } = peopleFromServer[0];
+function getSuggestions(people: Person[], query: string) {
+  let preparedSuggestions;
+  const trimmedQuery = query.toLowerCase();


The query should be trimmed before being used for filtering. If a user types a name with leading or trailing spaces (e.g., ' Ada '), the current startsWith check will fail to find a match because .trim() is missing here. Also, the variable name trimmedQuery is a bit misleading, as the value is only lowercased, not trimmed.

mateacademy-ai-mentor · 2026-03-29T23:43:46Z

src/App.tsx

+
+  const handleInputBlur = () => {
+    setIsInputFocused(false);
+    applyQueryDebounce.flush();


This flush() call introduces a bug. When a user clicks a suggestion, the onBlur event for the input can fire. This immediately triggers the debounced function, which calls setSelectedPerson(null) and can clear the person that was just selected.

Removing this line will resolve the issue. The debounced function will still execute after its normal delay if the user clicks away, which is acceptable behavior.

IanLuan

Great progress! However, there are two issues with your task:

When focusing on the empty input, the list is displayed, but we cannot select any items.
The debounce is not working properly. The search is triggering on every keystroke, but it should be debounced.

danf4691 · 2026-03-31T19:25:44Z

Closed the pull on mistake, the task is done now

solution

3571b59

mateacademy-ai-mentor suggested changes Mar 29, 2026

View reviewed changes

solution2

0d4b06c

danf4691 requested a review from mateacademy-ai-mentor March 29, 2026 22:23

mateacademy-ai-mentor suggested changes Mar 29, 2026

View reviewed changes

danf4691 requested a review from mateacademy-ai-mentor March 29, 2026 22:27

mateacademy-ai-mentor reviewed Mar 29, 2026

View reviewed changes

solution3

286ada8

danf4691 requested a review from mateacademy-ai-mentor March 29, 2026 22:33

mateacademy-ai-mentor suggested changes Mar 29, 2026

View reviewed changes

solution

0f83b59

danf4691 requested a review from mateacademy-ai-mentor March 30, 2026 14:19

IanLuan suggested changes Mar 31, 2026

View reviewed changes

solution

91cb15b

danf4691 closed this Mar 31, 2026

danf4691 reopened this Mar 31, 2026

danf4691 requested a review from IanLuan March 31, 2026 19:30

IanLuan approved these changes Apr 1, 2026

View reviewed changes

Conversation

danf4691 commented Mar 29, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

IanLuan left a comment

Choose a reason for hiding this comment

Uh oh!

danf4691 commented Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants