diff --git a/packages/frontend/src/components/Header/SearchBar.tsx b/packages/frontend/src/components/Header/SearchBar.tsx index 0f7b8b5e..1eeb2b00 100644 --- a/packages/frontend/src/components/Header/SearchBar.tsx +++ b/packages/frontend/src/components/Header/SearchBar.tsx @@ -1,8 +1,8 @@ import { MagnifyingGlassIcon, MultiplyIcon } from '@navikt/aksel-icons'; import cx from 'classnames'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useNavigate, useSearchParams } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom'; import { useWindowSize } from '../../../utils/useWindowSize.tsx'; import { Backdrop } from '../Backdrop'; import { useSearchString } from '../Header'; @@ -15,7 +15,6 @@ export const SearchBar: React.FC = () => { const [searchParams, setSearchParams] = useSearchParams(); const { searchString, setSearchString } = useSearchString(); const [searchValue, setSearchValue] = useState(searchString); - const navigate = useNavigate(); const { isTabletOrSmaller } = useWindowSize(); const handleClose = () => { @@ -26,7 +25,7 @@ export const SearchBar: React.FC = () => { const newSearchParams = new URLSearchParams(searchParams); if (newSearchParams.has('data')) { newSearchParams.delete('data'); - setSearchParams(newSearchParams); + setSearchParams(newSearchParams, { replace: true }); } setSearchValue(''); setSearchString(''); @@ -42,13 +41,18 @@ export const SearchBar: React.FC = () => { setSearchString(value); setShowDropdownMenu(false); newSearchParams.set('search', value); - setSearchParams(newSearchParams); - navigate({ - pathname: '/', - search: `?${newSearchParams.toString()}`, - }); + setSearchParams(newSearchParams, { replace: true }); }; + useEffect(() => { + const searchBarParam = new URLSearchParams(searchParams); + if (searchBarParam.get('search')) { + return; + } + setSearchValue(''); + searchBarParam.delete('search'); + }, [location.search]); + return (
diff --git a/packages/frontend/src/pages/Inbox/Inbox.tsx b/packages/frontend/src/pages/Inbox/Inbox.tsx index 78991a0f..c1c02750 100644 --- a/packages/frontend/src/pages/Inbox/Inbox.tsx +++ b/packages/frontend/src/pages/Inbox/Inbox.tsx @@ -136,7 +136,7 @@ export const Inbox = ({ viewType }: InboxProps) => { useEffect(() => { const newSearchParams = new URLSearchParams(searchParams); newSearchParams.set('sortBy', selectedSortOrder); - setSearchParams(newSearchParams); + setSearchParams(newSearchParams, { replace: true }); }, [selectedSortOrder]); const shouldShowSearchResults = !isFetchingSearchResults && showingSearchResults; diff --git a/packages/frontend/tests/stories/loginPartyContext.spec.ts b/packages/frontend/tests/stories/loginPartyContext.spec.ts index 6614e41e..a26ba866 100644 --- a/packages/frontend/tests/stories/loginPartyContext.spec.ts +++ b/packages/frontend/tests/stories/loginPartyContext.spec.ts @@ -110,21 +110,22 @@ test.describe('LoginPartyContext', () => { await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).not.toBeVisible(); }); - test('Go-back button updates state and shows correct data and color theme', async ({ page }: { page: Page }) => { - await expect(page.getByRole('button', { name: 'Test Testesen' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'Innkalling til sesjon' })).not.toBeVisible(); + test('Go-back button deletes search bar value', async ({ page }: { page: Page }) => { + await page.getByPlaceholder('Søk i innboks').click(); + await expect(page.getByPlaceholder('Søk i innboks')).toBeVisible(); + await page.getByPlaceholder('Søk i innboks').fill('skatten din'); + await page.getByPlaceholder('Søk i innboks').press('Enter'); - await page.getByRole('button', { name: 'Test Testesen' }).click(); - await page.getByText('Alle virksomheter').click(); - await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).not.toBeVisible(); - await expect(page.getByRole('link', { name: 'Innkalling til sesjon' })).toBeVisible(); - await expect(page.getByTestId('pageLayout-background')).toHaveClass(/.*isCompany.*/); + let searchParams = new URL(page.url()).searchParams; + expect(searchParams.has('search')).toBe(true); + expect(searchParams.get('search')).toBe('skatten din'); + await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).not.toBeVisible(); await page.goBack(); - await expect(page.getByRole('button', { name: 'Test Testesen' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'Innkalling til sesjon' })).not.toBeVisible(); - await expect(page.getByTestId('pageLayout-background')).not.toHaveClass(/.*isCompany.*/); + searchParams = new URL(page.url()).searchParams; + expect(searchParams.has('search')).toBe(false); + await expect(page.getByPlaceholder('Søk i innboks')).toBeEmpty(); + await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).toBeVisible(); }); });