Add useMemo to searchFilter.Autocomplete filterValue

Signed-off-by: Moro <sleeping.moro@gmail.com>
Signed-off-by: Moro <46880495+sleepingmoro@users.noreply.github.com>

.changeset/sweet-papayas-slide.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search-react': patch
+---
+
+Fix memoization of `filterValue` in `SearchFilter.Autocomplete` to prevent unintended resets

.github/vale/config/vocabularies/Backstage/accept.txt

@@ -252,6 +252,7 @@ makefile
 Matomo
 md
 memcache
+memoization
 memoize
 memoized
 microservice

plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx

@@ -418,5 +418,34 @@ describe('SearchFilter.Autocomplete', () => {
         expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent('');
       });
     });
+    
+    it('allows typing a value and shows suggestions', async () => {
+      render(
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <SearchContextProvider>
+            <SearchFilter.Autocomplete multiple name={name} values={values} />
+          </SearchContextProvider>
+        </TestApiProvider>,
+      );
+
+      const input = screen.getByRole('textbox');
+      await userEvent.type(input, 'value');
+
+      await waitFor(() => {
+        expect(input).toHaveValue('value');
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+        expect(
+          screen.getByRole('option', { name: values[0] }),
+        ).toBeInTheDocument();
+        expect(
+          screen.getByRole('option', { name: values[1] }),
+        ).toBeInTheDocument();
+      });
+    });
   });
 });

plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useState, useMemo } from 'react';
 import Chip from '@material-ui/core/Chip';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete, {
@@ -69,7 +69,10 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {
   const filterValueWithLabel = ensureFilterValueWithLabel(
     filters[name] as string | string[] | undefined,
   );
-  const filterValue = filterValueWithLabel || (multiple ? [] : null);
+  const filterValue = useMemo(
+    () => filterValueWithLabel || (multiple ? [] : null),
+    [filterValueWithLabel, multiple],
+  );
 
   // Set new filter values on input change.
   const handleChange = (