fix: Fix multiple browser history push when navigating and using sear…

…ch bar (#1351)
digdir · Nov 11, 2024 · 90fa546 · 90fa546
1 parent 84a7504
commit 90fa546
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 23 deletions.
diff --git 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<string>(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 (
     <div className={styles.searchbarContainer}>
       <div className={cx(styles.inputContainer, { [styles.searchbarOpen]: showDropdownMenu })}>

diff --git 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
@@ -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();
   });
 });