From 2c7661423c38be5c44f3f97b5b0e6a54e22273ae Mon Sep 17 00:00:00 2001 From: Moro <46880495+sleepingmoro@users.noreply.github.com> Date: Fri, 2 May 2025 20:50:22 +0000 Subject: [PATCH 1/2] Add useMemo to searchFilter.Autocomplete filterValue Signed-off-by: Moro Signed-off-by: Moro <46880495+sleepingmoro@users.noreply.github.com> --- .changeset/sweet-papayas-slide.md | 5 ++++ .../config/vocabularies/Backstage/accept.txt | 1 + .../SearchFilter.Autocomplete.test.tsx | 29 +++++++++++++++++++ .../SearchFilter.Autocomplete.tsx | 7 +++-- 4 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 .changeset/sweet-papayas-slide.md 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 = ( From 60100aeb0c2759f3735474a3bd3c9535e61b9bf5 Mon Sep 17 00:00:00 2001 From: Moro Date: Fri, 2 May 2025 23:11:13 +0200 Subject: [PATCH 2/2] prettier fix Signed-off-by: Moro --- .changeset/sweet-papayas-slide.md | 2 +- .../components/SearchFilter/SearchFilter.Autocomplete.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/sweet-papayas-slide.md b/.changeset/sweet-papayas-slide.md index 9db998e948..9fbc067ca7 100644 --- a/.changeset/sweet-papayas-slide.md +++ b/.changeset/sweet-papayas-slide.md @@ -2,4 +2,4 @@ '@backstage/plugin-search-react': patch --- -Fix memoization of `filterValue` in `SearchFilter.Autocomplete` to prevent unintended resets \ No newline at end of file +Fix memoization of `filterValue` in `SearchFilter.Autocomplete` to prevent unintended resets 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 3d0dd95859..ca6585a039 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx @@ -418,7 +418,7 @@ describe('SearchFilter.Autocomplete', () => { expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(''); }); }); - + it('allows typing a value and shows suggestions', async () => { render(