add task solution by 24O07 · Pull Request #1145 · mate-academy/react_autocomplete

24O07 · 2026-03-31T16:23:12Z

[DEMO LINK] https://24O07.github.io/react_autocomplete/

mateacademy-ai-mentor

Review Summary

This is a solid implementation, and you've done a great job meeting most of the requirements. The component is well-structured and the debouncing logic is correct. However, I'm requesting a small change to the filtering logic in src/components/Auto.tsx. Currently, the filter is triggered even if the user enters only spaces, which goes against the requirements [CHECKLIST ITEM #1]. To resolve this, please ensure you trim() the input value and only perform the filtering if the resulting string is not empty. This will make the component's behavior more robust and align with the task's checklist. Keep up the great work!

✨ 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-31T16:25:18Z

src/components/Auto.tsx

+      if (inputValue === '') {
+        setSuggestions(data);
+      } else {
+        const filtered = data.filter(person =>
+          person.name.toLowerCase().includes(inputValue.toLowerCase()),
+        );
+
+        setSuggestions(filtered);
+      }


This filtering logic doesn't account for inputs that contain only whitespace. This violates checklist item #1: 'make sure that filter won't be called if user enred spaces only;'.

Additionally, the inputValue is not trimmed before being used for filtering, which means that leading or trailing spaces will affect the search results (e.g., searching for " Ada " instead of "Ada").

You should trim the inputValue and only proceed with filtering if the result is not an empty string.

mateacademy-ai-mentor

Review Summary

Great job on the progress so far! You've correctly implemented the debouncing and state management. However, I'm requesting changes for a couple of issues that affect the core functionality.

Incorrect Filtering with Whitespace: The filter logic currently uses the raw inputValue, which includes spaces. This means a search for " Luke " won't find "Luke Skywalker". Please use the trimmedValue for the search. Also, an input containing only spaces incorrectly shows all suggestions instead of none, which violates a requirement [CHECKLIST ITEM #1].
Dropdown Opens on Page Load: The suggestions dropdown appears automatically on the initial render without any user interaction. The requirement states that it should only open when the input is focused. The onFocus handler already takes care of this, so the effect causing it to open on load needs to be adjusted.

Once these are fixed, your component will be perfect. Keep up the great work!

✨ 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-31T16:31:12Z

src/components/Auto.tsx

+        setSuggestions(data);
+      } else {
+        const filtered = data.filter(person =>
+          person.name.toLowerCase().includes(inputValue.toLowerCase()),


The filter logic here uses inputValue, which includes leading/trailing whitespace. This will likely cause searches to fail (e.g., searching for " Luke " won't find "Luke Skywalker"). You should use trimmedValue for the search, which you've already calculated on line 24.

mateacademy-ai-mentor · 2026-03-31T16:31:13Z

src/components/Auto.tsx

+        setSuggestions(filtered);
+      }
+
+      setDropdownActive(true);


Calling setDropdownActive(true) here causes the dropdown to open on the initial render without any user interaction. The requirement states that the list should appear "when input is focused". The onFocus handler already opens the dropdown, so this line may be unnecessary.

mateacademy-ai-mentor

Review Summary

I am approving this solution as an educational override to help you progress, but there is one key requirement that still needs to be addressed.

Great job fixing the previous issues with debouncing and whitespace handling! The component is much more robust now. The main issue remaining is that the suggestions list doesn't appear when the input is focused but empty. The current logic hides the dropdown when the input value is empty, which prevents the list of all people from showing up as required. This is also why the automated tests are failing—they can't find the dropdown menu to interact with.

To fix this, consider managing the dropdown's visibility with a dedicated state variable (e.g., isDropdownOpen). You can set this state to true on focus and use it to conditionally add the is-active class to the Bulma dropdown container. This will give you more direct control over when the dropdown appears.

Keep up the excellent work!

✨ 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-31T16:37:01Z

src/components/Auto.tsx

+      if (trimmedValue === '') {
+        // якщо інпут порожній або тільки пробіли — не показуємо підказок
+        setSuggestions([]);
+        setDropdownActive(false); // закриваємо dropdown


This logic hides the dropdown when the input becomes empty. This causes an issue when a user types something and then clears the input field. Even if the input is still focused, the suggestion list disappears. The expected behavior is for the list to show all people again, as per the requirement for an empty, focused input.

mateacademy-ai-mentor · 2026-03-31T16:37:01Z

src/components/Auto.tsx

+            if (trimmedValue !== '') {
+              setDropdownActive(true);
+              setSuggestions(
+                data.filter(person =>
+                  person.name.toLowerCase().includes(trimmedValue.toLowerCase()),
+                ),
+              );
+            }


This condition prevents suggestions from appearing when the input is focused while empty. According to the requirements, the component should 'show the list of all people when input is focused but empty'. This logic needs to be adjusted to handle the case where trimmedValue is empty and show all suggestions from the data prop.

etojeDenys

demo link does not work. please fix it and re-request the review. also, make sure you pass all the tests

Anton-Kuchmasov

DEMO link is not fixed yet, please run npm run deploy

add task solution

78a238d

mateacademy-ai-mentor suggested changes Mar 31, 2026

View reviewed changes

add task solution

90a686f

24O07 requested a review from mateacademy-ai-mentor March 31, 2026 16:28

mateacademy-ai-mentor suggested changes Mar 31, 2026

View reviewed changes

add task solution

3f41bee

24O07 requested a review from mateacademy-ai-mentor March 31, 2026 16:34

mateacademy-ai-mentor suggested changes Mar 31, 2026

View reviewed changes

add task solution

a71a6f1

24O07 requested a review from mateacademy-ai-mentor March 31, 2026 16:45

etojeDenys suggested changes Mar 31, 2026

View reviewed changes

add task solution

953d302

24O07 requested a review from etojeDenys April 1, 2026 11:15

Anton-Kuchmasov suggested changes Apr 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution#1145

add task solution#1145
24O07 wants to merge 5 commits intomate-academy:masterfrom
24O07:develop

24O07 commented Mar 31, 2026 •

edited

Loading

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Mar 31, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Mar 31, 2026

Uh oh!

mateacademy-ai-mentor Mar 31, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Mar 31, 2026

Uh oh!

mateacademy-ai-mentor Mar 31, 2026

Uh oh!

etojeDenys left a comment

Uh oh!

Anton-Kuchmasov left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

24O07 commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

mateacademy-ai-mentor Mar 31, 2026

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!

mateacademy-ai-mentor Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Mar 31, 2026

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!

mateacademy-ai-mentor Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

etojeDenys left a comment

Choose a reason for hiding this comment

Uh oh!

Anton-Kuchmasov left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

24O07 commented Mar 31, 2026 •

edited

Loading