search

reactjs / react.dev

The React documentation website
https://react.dev/
Creative Commons Attribution 4.0 International
11.07k stars 7.55k forks source link

Fix Page Scroll Behavior After Closing Algolia Search Bar #6955

Closed sreenath-here closed 5 months ago

sreenath-here commented 5 months ago

Description:

This pull request addresses an issue where the website would scroll back to the top of the page after closing the Algolia search bar, regardless of the user's initial position on the page.

Issue:

Whenever the Algolia search bar is activated or clicked, and then subsequently closed, the page scrolls back to the top. This disrupts the user's experience, especially if they were in the middle of reading content further down the page.

Solution:

The following changes were made to resolve this issue:

  1. Implemented state management to store the user's scroll position before the search bar is activated.
  2. Ensured that the scroll position is restored when the search bar is closed.
  3. Added event listeners to manage scroll behavior effectively.

Changes:

  1. Added a state variable to store the scroll position.
  2. Modified the search bar activation and deactivation logic to handle scroll position.
  3. Updated relevant components to ensure seamless user experience.

Testing:

Tested on multiple pages to ensure the scroll position is correctly maintained after closing the search bar. Verified that the fix does not introduce any new issues or regressions.

Screenshots:

Before:

https://github.com/reactjs/react.dev/assets/122635878/a94961fc-c726-48aa-94ec-fddb67b4790d

After:

https://github.com/reactjs/react.dev/assets/122635878/855e4c7b-6767-42cb-a25b-3ed15e1ce36e

vercel[bot] commented 5 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
19-react-dev ❌ Failed (Inspect) Jun 15, 2024 11:35am
react-dev ❌ Failed (Inspect) Jun 15, 2024 11:35am
sreenath-here commented 5 months ago

I have resolved the issue by adding state property in the "search.tsx", But while running locally in my system I got error about missing Author, Date, Description details in the "index.md" blog. So I have added them locally and ran the application, But while committing to github I haven't committed them, I guess that's the reason the pull request failed at vercel deployment.