add task solution by Cumacea · Pull Request #1154 · mate-academy/react_autocomplete

Cumacea · 2026-04-15T12:08:55Z

mateacademy-ai-mentor

Review Summary

I am requesting changes because there are a couple of critical requirement mismatches that will break the expected behavior and tests.

Critical issues that must be fixed:

In src/components/Autocomplete.tsx, the change handler currently always schedules setNormalizedQuery(event.target.value) (around line 33), even when the input is only spaces. This violates the requirement to not run filtering for spaces-only input [CHECKLIST ITEM #1]. You should trim the value inside the timeout and, if value.trim() === '', treat it as an empty input (e.g. set normalizedQuery to '' and avoid running the filter), and optionally skip updating when the value hasn’t actually changed.
In src/App.tsx, the prop passed to Autocomplete is named onSelect, but the task explicitly requires passing the selected person through an onSelected callback. Because of this mismatch, the Autocomplete component cannot call back correctly to set or clear the selected person (including calling onSelected(null) when the input changes), breaking the specified contract. Rename the prop to onSelected and update the Autocomplete component to expect and invoke onSelected.

Once you address the spaces-only handling and align the callback prop name with the requirement, the implementation should satisfy the critical functional expectations. You’ve already covered most of the core behavior (debounce, selection updates, title rendering), so these focused fixes will bring the solution in line with the task. Keep going — you’re very close to a fully correct implementation.

✨ 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-04-15T13:36:28Z

+  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+
+    window.clearTimeout(timerId.current);
+
+    if (selectedPerson && event.target.value !== selectedPerson.name) {
+      onSelect(null);
+    }
+
+    timerId.current = window.setTimeout(() => {
+      setNormalizedQuery(event.target.value);
+    }, delay);
+  };
+
+  const filteredPeople = useMemo(() => {
+    return people.filter(person => person.name.includes(normalizedQuery));
+  }, [normalizedQuery, people]);


This violates checklist item #1: "- make sure that filter won't be called if user enred spaces only;"

Currently you always schedule setNormalizedQuery(event.target.value) (line 33) even when the value is spaces-only. As a result the memoized filter (line 38) runs with a spaces-only string and returns no matches instead of treating it like an empty input. Consider trimming the value before scheduling the update and ignoring spaces-only input. Example approach: capture const value = event.target.value; then in the timeout use const trimmed = value.trim(); if (trimmed === '') { setNormalizedQuery(''); } else if (value !== normalizedQuery) { setNormalizedQuery(value); } — this avoids running the filter for spaces-only and also avoids updating state when the normalized value hasn't changed.

mateacademy-ai-mentor · 2026-04-15T13:36:28Z

-        </div>
+        <Autocomplete
+          people={peopleFromServer}
+          onSelect={handleSelectPerson}


The task description requires that the selected person be passed to an onSelected callback passed via props. Here the prop is named onSelect so the Autocomplete component will not receive the expected onSelected callback. Rename the prop to onSelected (and make the Autocomplete expect onSelected) so the component API matches the exact requirement.

mateacademy-ai-mentor · 2026-04-15T13:36:28Z

-  const { name, born, died } = peopleFromServer[0];
+  const [selectedPerson, setSelectedPerson] = useState<Person | null>(null);
+
+  const handleSelectPerson = (person: Person | null) => {


Because the callback prop is misnamed, the Autocomplete won't be able to call back to clear the selected person when the input value changes. Ensure the prop name is corrected so that the App can receive onSelected(null) to update the title to No selected person when the input changes.

mateacademy-ai-mentor

Review Summary

I am requesting changes because the current Autocomplete behavior still violates a critical checklist requirement around spaces-only input. Specifically, in src/components/Autocomplete.tsx, you always schedule setNormalizedQuery(event.target.value) (around line 33), so when the user types only spaces, the debounced filter (around line 38) runs with a spaces-only string and returns no matches instead of treating it as an empty query. This directly conflicts with the checklist requirement that the filter must not be run for spaces-only input [CHECKLIST ITEM #1]. To fix this, capture the raw value first (e.g. const value = event.target.value;), then in the timeout compute const trimmed = value.trim(); and either set normalizedQuery to '' when trimmed === '', or skip updating/filtering for spaces-only input; also consider skipping setNormalizedQuery when the value is effectively unchanged to avoid unnecessary work. Once you adjust the input handling so that spaces-only behaves like an empty input and does not trigger filtering, the component will align with the task expectations. Overall the rest of the behavior looks solid, and with this correction your solution should be in good shape.

✨ 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-04-15T13:36:32Z

+  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+
+    window.clearTimeout(timerId.current);
+
+    if (selectedPerson && event.target.value !== selectedPerson.name) {
+      onSelect(null);
+    }
+
+    timerId.current = window.setTimeout(() => {
+      setNormalizedQuery(event.target.value);
+    }, delay);
+  };
+
+  const filteredPeople = useMemo(() => {
+    return people.filter(person => person.name.includes(normalizedQuery));
+  }, [normalizedQuery, people]);


This violates checklist item #1: "- make sure that filter won't be called if user enred spaces only;"

Currently you always schedule setNormalizedQuery(event.target.value) (line 33) even when the value is spaces-only. As a result the memoized filter (line 38) runs with a spaces-only string and returns no matches instead of treating it like an empty input. Consider trimming the value before scheduling the update and ignoring spaces-only input. Example approach: capture const value = event.target.value; then in the timeout use const trimmed = value.trim(); if (trimmed === '') { setNormalizedQuery(''); } else if (value !== normalizedQuery) { setNormalizedQuery(value); } — this avoids running the filter for spaces-only and also avoids updating state when the normalized value hasn't changed.

mateacademy-ai-mentor

Review Summary

I am requesting changes because, while the core autocomplete behavior is implemented correctly (debounce, Bulma dropdown, full list on focus, correct selection handling, and the No matching suggestions message), there is one critical issue that can break the tests. The task and tests expect specific data-qa attributes, but your components currently use data-cy on the input, the suggestions list, each suggestion item, and the "no suggestions" message in src/components/Autocomplete.tsx and the related usage in src/App.tsx, so automated checks that look for data-qa will not find the elements they need. To fix this, replace each data-cy="..." with the corresponding data-qa="..." value that the task specifies (e.g. on the text input, the container for the suggestions, each suggestion row, and the no-results label), and ensure the attribute values exactly match the expected names. As a minor improvement, you can avoid unnecessary state updates by only calling setNormalizedQuery(trimmedValue) inside your debounced handler when trimmedValue is actually different from the current normalized query (using a functional updater or a comparison against the latest state). Another optional enhancement is to make the filtering case-insensitive by lowercasing both the query and person.name before calling includes, which will feel more natural to users. Once you align the test attributes, your solution should fully satisfy both the functional requirements and the automated testing setup, and the rest of your implementation looks solid and thoughtful.

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

Anton-Kuchmasov

Good job!

Check out comments - they might be helpful

Anton-Kuchmasov · 2026-04-15T14:30:37Z

+  };
+
+  const filteredPeople = useMemo(() => {
+    return people.filter(person => person.name.includes(normalizedQuery));


can be better if you'll ignore case of entered query

e.g. this search (take a look onto screenshot below) will be valid for search

Anton-Kuchmasov · 2026-04-15T14:31:01Z

+      {focused && (
+        <div className="dropdown-menu" role="menu" data-cy="suggestions-list">
+          <div className="dropdown-content">
+            {filteredPeople.length !== 0 ? (


Suggested change

{filteredPeople.length !== 0 ? (

{!!filteredPeople.length ? (

add task solution

9e0ea0f

mateacademy-ai-mentor suggested changes Apr 15, 2026

View reviewed changes

fix props naming

b77669e

Cumacea requested a review from mateacademy-ai-mentor April 15, 2026 14:03

mateacademy-ai-mentor suggested changes Apr 15, 2026

View reviewed changes

Anton-Kuchmasov approved these changes Apr 15, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution#1154

add task solution#1154
Cumacea wants to merge 2 commits intomate-academy:masterfrom
Cumacea:develop

Cumacea commented Apr 15, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

Anton-Kuchmasov left a comment

Uh oh!

Anton-Kuchmasov Apr 15, 2026

Uh oh!

Anton-Kuchmasov Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	{filteredPeople.length !== 0 ? (
	{!!filteredPeople.length ? (

Conversation

Cumacea commented Apr 15, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor Apr 15, 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 Apr 15, 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!

Anton-Kuchmasov left a comment

Choose a reason for hiding this comment

Uh oh!

Anton-Kuchmasov Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Anton-Kuchmasov Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants