NoJira: Browser history fix. by sherakama · Pull Request #700 · SU-SWS/ood_giving_site

sherakama · 2026-03-19T00:18:07Z

READY FOR REVIEW

Summary

Browser history bugs

Review By (Date)

Soonish

Criticality

Normal

Review Tasks

Reproduction Steps

1) Search Results Page Crash / Hard Failure

Steps

Open `https://giving.stanford.edu.
Open the site search (header Search button).
Enter a query (example: athletics) and submit.
Confirm you land on /search-results?q=athletics.
Navigate to Home (/) using the site logo/link (Stanford Giving).
Click the browser Back button to return to the previous search URL.

Actual (before fix)

The search route will fail

Expected

Search page should fully render and remain interactive when returning via browser back navigation.

Repeat with deploy preview

https://deploy-preview-700--adapt-giving.netlify.app/
The search route will render

2) Missing Search Elements After Back Navigation

Steps

Open https://giving.stanford.edu/search-results?q=athletics (or perform a search from Home).
Verify search UI is present:
- Search input
- Results header (e.g. “77 results found…”)
- Results list/pagination
Navigate to Home (/) via client-side navigation (logo/link).
Click browser Back to return to /search-results?q=athletics.

Actual (before fix)

URL returns to /search-results?..., but search UI elements are missing:
- Input and/or results header/list do not render
- Page shows only surrounding/static content

Expected

Returning to /search-results?... should restore the full search UI and results state every time.

Repeat with deploy preview

https://deploy-preview-700--adapt-giving.netlify.app/
The search route will render

netlify · 2026-03-19T00:18:15Z

✅ Deploy Preview for adapt-giving ready!

Name	Link
🔨 Latest commit	`b04d5b8`
🔍 Latest deploy log	https://app.netlify.com/projects/adapt-giving/deploys/69bd87d91aa7e90007eb5659
😎 Deploy Preview	https://deploy-preview-700--adapt-giving.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

sherakama · 2026-03-19T00:19:10Z

package.json

Did a little package update while I was here. Just minor/patch versions.

sherakama · 2026-03-19T00:20:49Z

components/Search/Search.tsx

+              q: indexUiState?.query,
+              page: indexUiState?.page,


Before, it would throw an error if these weren't "safely" accessed and the indexUiState was unavailable.

sherakama · 2026-03-19T00:21:09Z

components/Search/Search.tsx


  return (
    <InstantSearchNext
+      key={routeKey}


This was the magic fix to bring stability to the InstantSearch app.

Copilot

Pull request overview

Updates the site search implementation to better survive browser back/forward navigation on the /search-results route, and aligns related packages to newer versions.

Changes:

Updated Search to memoize Algolia clients, harden routing state mapping, and force InstantSearchNext remounts based on current URL search params.
Bumped Next.js / InstantSearch / Storyblok (and related) dependencies to newer patch/minor versions.

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.

File	Description
package.json	Dependency bumps (Next.js, InstantSearch Next.js integration, Storyblok, Netlify, etc.).
package-lock.json	Lockfile refresh reflecting dependency upgrades and transitive additions.
components/Search/Search.tsx	Search routing/back-navigation behavior adjustments (memoization, keying, safer state mapping).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

package.json

components/Search/Search.tsx

yvonnetangsu

Tested and worked as described 👍🏼 Thanks for this update 🎉

Copilot

Pull request overview

This PR aims to resolve browser back/forward navigation issues on the /search-results route by making the InstantSearch state more resilient to remounts and avoiding crashes when restoring routing state.

Changes:

Bump Next.js and related dependencies (including react-instantsearch-nextjs) to newer patch/minor versions.
Update components/Search/Search.tsx to memoize Algolia client/search client construction and adjust InstantSearch routing/state handling.
Add an InstantSearch configuration workaround (key + future.preserveSharedStateOnUnmount) intended to improve back-navigation behavior.

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.

File	Description
package.json	Updates framework/vendor dependencies related to Next.js, Netlify, Storyblok, and Algolia InstantSearch integration.
package-lock.json	Regenerates lockfile to reflect dependency upgrades and transitive dependency changes.
components/Search/Search.tsx	Adjusts InstantSearch client initialization and routing state mapping; introduces a remount/reset workaround via a changing `key`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

components/Search/Search.tsx

Copilot · 2026-03-20T17:39:03Z

components/Search/Search.tsx

@@ -54,13 +55,25 @@ export const Search = ({

      return algoliaClient.search(requests);
    },
-  };
+  }), [algoliaClient]);
+
+  // This is a workaround to reset the InstantSearch state when the component is unmounted and remounted,
+  // which can happen when navigating between pages in Next.js. By changing the key of the
+  // InstantSearch component, we force it to reset its state.
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setKey(`search-component-${Date.now()}`);
+  }, []);


The key state is updated in a mount-only useEffect, which forces InstantSearchNext to mount twice (initial render with search-component, then immediate remount with the timestamp key). This can trigger duplicate searches/flicker and makes the inline comment misleading (it’s not tied to an unmount/remount). Consider initializing the key once in useState (lazy initializer) and removing the effect + lint-disable, or derive the key from navigation state so it only changes when you truly need to reset InstantSearch. Also double-check whether forcing a reset via key aligns with future.preserveSharedStateOnUnmount: true, since the two approaches are at odds (reset vs preserve).

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…nto troubleshooting

Browser history fix.

fdeac4a

Copilot AI review requested due to automatic review settings March 19, 2026 00:18

sherakama commented Mar 19, 2026

View reviewed changes

package.json

Copy link

Member Author

sherakama Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did a little package update while I was here. Just minor/patch versions.

sherakama commented Mar 19, 2026

View reviewed changes

sherakama requested review from ericbakenhus and yvonnetangsu March 19, 2026 00:22

Copilot AI reviewed Mar 19, 2026

View reviewed changes

package.json Show resolved Hide resolved

components/Search/Search.tsx Show resolved Hide resolved

yvonnetangsu approved these changes Mar 19, 2026

View reviewed changes

sherakama added 2 commits March 20, 2026 10:16

Stability hack.

66bced3

Stability hack.

0671180

sherakama requested a review from Copilot March 20, 2026 17:36

Copilot started reviewing on behalf of sherakama March 20, 2026 17:36 View session

Copilot AI reviewed Mar 20, 2026

View reviewed changes

sherakama and others added 3 commits March 20, 2026 10:41

Update components/Search/Search.tsx

651f220

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Stability hack.

c7f4d55

Merge branch 'troubleshooting' of github.com:su-sws/ood_giving_site i…

b04d5b8

…nto troubleshooting

sherakama merged commit 24e260e into dev Mar 20, 2026
5 checks passed

sherakama deleted the troubleshooting branch March 20, 2026 17:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NoJira: Browser history fix.#700

NoJira: Browser history fix.#700
sherakama merged 6 commits intodevfrom
troubleshooting

sherakama commented Mar 19, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 19, 2026 •

edited

Loading

Uh oh!

sherakama Mar 19, 2026

Uh oh!

sherakama Mar 19, 2026

Uh oh!

sherakama Mar 19, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

yvonnetangsu left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

sherakama commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

READY FOR REVIEW

Summary

Review By (Date)

Criticality

Review Tasks

Reproduction Steps

1) Search Results Page Crash / Hard Failure

2) Missing Search Elements After Back Navigation

Uh oh!

netlify bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for adapt-giving ready!

Uh oh!

sherakama Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

sherakama Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

sherakama Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

yvonnetangsu left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sherakama commented Mar 19, 2026 •

edited

Loading

netlify bot commented Mar 19, 2026 •

edited

Loading