[1.x] Fix resetScrollPositions and restoreScrollPositions router methods
#1980
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
pedroborges
commented
Sep 19, 2024
| if (window.location.hash) { | ||
| // We're using a setTimeout() here as a workaround for a bug in the React adapter where the | ||
| // rendering isn't completing fast enough, causing the anchor link to not be scrolled to. | ||
| setTimeout(() => document.getElementById(window.location.hash.slice(1))?.scrollIntoView()) |
There was a problem hiding this comment.
setTimeout is no longer needed
This was referenced Sep 19, 2024
joetannenbaum
approved these changes
Sep 19, 2024
This was referenced Sep 19, 2024
pedroborges
added a commit
to olragon/inertia
that referenced
this pull request
Sep 24, 2024
* master: (95 commits) [1.x] Fix props reactivity (inertiajs#1969) [1.x] useForm wrongly overwrites default values after successful submission (inertiajs#1935) Update changelog [1.x] Fix `resetScrollPositions` and `restoreScrollPositions` router methods (inertiajs#1980) [1.x] Fix [scroll-region] on html element with overflow-scroll (inertiajs#1782) [1.x] Fix useForm re-renders by memoizing functions in React (inertiajs#1607) [1.x] Fix "DataCloneError: <Object> could not be cloned" (inertiajs#1967) [1.x] preserveScroll should be true on initial page visit (inertiajs#1360) Fix type augmentation (inertiajs#1958) [1.x] Fix doubling hash in React StrictMode (inertiajs#1728) [1.x] Add SSR support for Svelte 5 (inertiajs#1970) [1.x] Fix <Render /> component to respect "preserveState" (inertiajs#1943) [1.x] Fix 'received an unexpected slot "default"' warning (inertiajs#1941) QA: Add @types/lodash to fix svelte-check QA: Update reactive if statement Review useForm types QA: Move the if server up QA: Revert tsconfig change QA: Remove plural QA: Remove unused props type + add extra types just in case ... # Conflicts: # packages/react/src/index.ts
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR resolves two scroll-related problems in Inertia:
Scroll Reset on Page Navigation
Linkcauses the scroll position to reset briefly before loading new content, leading to a flash of the previous page and jank on heavier or mobile pages.Scroll Position Restoration for
[scroll-region]Elements[scroll-region]elements don't restore their scroll positions when navigating back becauserestoreScrollPositionsdoesn't detect them before the document body updates.setTimeout, butnextFrameis a better approach.Solution
Used a double
requestAnimationFrame(RAF) method to ensure callbacks run after the next repaint. This approach is used internally by Vue:This fix is implemented in the core, making it safe for React, Vue, and Svelte adapters without needing adapter-specific changes.
Fixes #1211, #1459, #1698, #1796, #1802, #1803, #1816, #1922