From 2f5746adf801399d54a1eea42eedcd92d1d96ee9 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Wed, 20 Nov 2024 10:31:31 +0100
Subject: [PATCH 1/2] fix(html): mirror query clearing in URL

---
 packages/html-reporter/src/headerView.tsx   | 11 +++++++++--
 tests/playwright-test/reporter-html.spec.ts | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/html-reporter/src/headerView.tsx b/packages/html-reporter/src/headerView.tsx
index 01f92f1ecb6ba..99262087118b8 100644
--- a/packages/html-reporter/src/headerView.tsx
+++ b/packages/html-reporter/src/headerView.tsx
@@ -49,13 +49,20 @@ export const HeaderView: React.FC<React.PropsWithChildren<{
       <form className='subnav-search' onSubmit={
         event => {
           event.preventDefault();
-          navigate(`#?q=${filterText ? encodeURIComponent(filterText) : ''}`);
+          if (filterText)
+            navigate(`#?` + new URLSearchParams({ q: filterText }));
+          else
+            navigate('#');
         }
       }>
         {icons.search()}
         {/* Use navigationId to reset defaultValue */}
         <input type='search' spellCheck={false} className='form-control subnav-search-input input-contrast width-full' value={filterText} onChange={e => {
-          setFilterText(e.target.value);
+          const filterText = e.target.value;
+          if (filterText)
+            navigate(`#?` + new URLSearchParams({ q: filterText }));
+          else
+            navigate('#');
         }}></input>
       </form>
     </div>
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index 59d986857fd25..d6c67d0c6efd0 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -2368,6 +2368,24 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       await expect(page.getByText('a.test.js:4', { exact: true })).toBeVisible();
     });
 
+    test('filter should be mirrored in URL', async ({ runInlineTest, showReport, page }) => {
+      const result = await runInlineTest({
+        'a.test.js': `
+          const { test, expect } = require('@playwright/test');
+          test('test1', async ({}) => { expect(1).toBe(1); });
+        `,
+      }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+
+      expect(result.exitCode).toBe(0);
+
+      await showReport();
+      const searchInput = page.locator('.subnav-search-input');
+      await searchInput.fill('a.test.js:3:11');
+      await page.waitForURL(url => new URLSearchParams(url.hash.slice(1)).get('q') === 'a.test.js:3:11');
+      await searchInput.clear();
+      await page.waitForURL(url => !new URLSearchParams(url.hash.slice(1)).has('q'));
+    });
+
     test('should properly display beforeEach with and without title', async ({ runInlineTest, showReport, page }) => {
       const result = await runInlineTest({
         'a.test.js': `

From 8337dfb9bce2e0779c04829aa5cac78f729e72e8 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Wed, 20 Nov 2024 16:55:33 +0100
Subject: [PATCH 2/2] don't pollute history

---
 packages/html-reporter/src/headerView.tsx   | 2 +-
 tests/playwright-test/reporter-html.spec.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/html-reporter/src/headerView.tsx b/packages/html-reporter/src/headerView.tsx
index 99262087118b8..a2aac9a72f182 100644
--- a/packages/html-reporter/src/headerView.tsx
+++ b/packages/html-reporter/src/headerView.tsx
@@ -60,7 +60,7 @@ export const HeaderView: React.FC<React.PropsWithChildren<{
         <input type='search' spellCheck={false} className='form-control subnav-search-input input-contrast width-full' value={filterText} onChange={e => {
           const filterText = e.target.value;
           if (filterText)
-            navigate(`#?` + new URLSearchParams({ q: filterText }));
+            setFilterText(filterText);
           else
             navigate('#');
         }}></input>
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index d6c67d0c6efd0..129d87792adce 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -2381,6 +2381,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       await showReport();
       const searchInput = page.locator('.subnav-search-input');
       await searchInput.fill('a.test.js:3:11');
+      await searchInput.press('Enter');
       await page.waitForURL(url => new URLSearchParams(url.hash.slice(1)).get('q') === 'a.test.js:3:11');
       await searchInput.clear();
       await page.waitForURL(url => !new URLSearchParams(url.hash.slice(1)).has('q'));