diff --git a/packages/html-reporter/src/headerView.tsx b/packages/html-reporter/src/headerView.tsx
index 01f92f1ecb..8384f9e31d 100644
--- a/packages/html-reporter/src/headerView.tsx
+++ b/packages/html-reporter/src/headerView.tsx
@@ -49,12 +49,14 @@ export const HeaderView: React.FC<React.PropsWithChildren<{
       <form className='subnav-search' onSubmit={
         event => {
           event.preventDefault();
-          navigate(`#?q=${filterText ? encodeURIComponent(filterText) : ''}`);
+          const url = new URL(window.location.href);
+          url.hash = filterText ? '?' + new URLSearchParams({ q: filterText }) : '';
+          navigate(url);
         }
       }>
         {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 => {
+        <input spellCheck={false} className='form-control subnav-search-input input-contrast width-full' value={filterText} onChange={e => {
           setFilterText(e.target.value);
         }}></input>
       </form>
diff --git a/packages/html-reporter/src/links.tsx b/packages/html-reporter/src/links.tsx
index 4beb7b65e0..1e5cad48c1 100644
--- a/packages/html-reporter/src/links.tsx
+++ b/packages/html-reporter/src/links.tsx
@@ -23,7 +23,7 @@ import './links.css';
 import { linkifyText } from '@web/renderUtils';
 import { clsx } from '@web/uiUtils';
 
-export function navigate(href: string) {
+export function navigate(href: string | URL) {
   window.history.pushState({}, '', href);
   const navEvent = new PopStateEvent('popstate');
   window.dispatchEvent(navEvent);