diff --git a/.changeset/sweet-papayas-slide.md b/.changeset/sweet-papayas-slide.md new file mode 100644 index 0000000000..9db998e948 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.github/vale/config/vocabularies/Backstage/accept.txt b/.github/vale/config/vocabularies/Backstage/accept.txt index c845a6060b..f9a0595489 100644 --- a/.github/vale/config/vocabularies/Backstage/accept.txt +++ b/.github/vale/config/vocabularies/Backstage/accept.txt @@ -252,6 +252,7 @@ makefile Matomo md memcache +memoization memoize memoized microservice diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx index 5bbb8eb27f..3d0dd95859 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx +++ b/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( + + + + + , + ); + + 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(); + }); + }); }); }); diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx index f95f0153fe..2002904f3f 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx +++ b/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 = (