fix(react-router-dom): fix getSearchParamsForLocation in Firefox (#…

…10620)

Co-authored-by: Matt Brophy <matt@brophy.org>

.changeset/firefox-addons-and-web-extensions-bug.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Fixes an edge-case affecting web extensions in Firefox that use `URLSearchParams` and the `useSearchParams` hook.

contributors.yml

@@ -222,5 +222,6 @@
 - yionr
 - yuleicul
 - zheng-chuang
+- smithki
 - istarkov
 - louis-young

packages/react-router-dom/__tests__/search-params-test.tsx

@@ -161,4 +161,25 @@ describe("useSearchParams", () => {
 
     expect(node.innerHTML).toMatch(/The current value is ""/);
   });
+
+  it("returns initial default values in search params", () => {
+    function SearchPage() {
+      let [searchParams] = useSearchParams({ a: "1", b: "2" });
+      return <p>{searchParams.toString()}</p>;
+    }
+
+    act(() => {
+      ReactDOM.createRoot(node).render(
+        <MemoryRouter initialEntries={["/search?value=initial"]}>
+          <Routes>
+            <Route path="search" element={<SearchPage />} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    expect(node.innerHTML).toMatchInlineSnapshot(
+      `"<p>value=initial&amp;a=1&amp;b=2</p>"`
+    );
+  });
 });

packages/react-router-dom/dom.ts

@@ -97,13 +97,18 @@ export function getSearchParamsForLocation(
   let searchParams = createSearchParams(locationSearch);
 
   if (defaultSearchParams) {
-    for (let key of defaultSearchParams.keys()) {
+    // Use `defaultSearchParams.forEach(...)` here instead of iterating of
+    // `defaultSearchParams.keys()` to work-around a bug in Firefox related to
+    // web extensions. Relevant Bugzilla tickets:
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1414602
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1023984
+    defaultSearchParams.forEach((_, key) => {
       if (!searchParams.has(key)) {
         defaultSearchParams.getAll(key).forEach((value) => {
           searchParams.append(key, value);
         });
       }
-    }
+    });
   }
 
   return searchParams;