Fix scroll restoration for layout components #26861
Merged
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
gatsbot
bot
added
the
status: triage needed
micha149
changed the title
this is required to match the type of `useRef` which requires the target
element type to be specified.
The hook can be used like the following:
```typescript
const MyComponent: React.FunctionComponent = () => {
const scrollRestorationProps = useScrollRestoration<HTMLDivElement>(`some-key`)
return (
<div
{...scrollRestorationProps}
style={{ overflow: `auto` }}
>
Test
</div>
)
}
```
Fixes: gatsbyjs#26458
Previously, the scroll position was only updated when the using component was re-rendered. This did not work when the hook is used in a wrapping Layout component, becaus its persitent over location changes. Adding the location key to useEffect will cause the scroll position is updated every time the key changes.
micha149
force-pushed
the
fix-scroll-restoration-on-layout
branch
from
330ac40
to
987d950
Compare
sidharthachatterjee
added
status: needs core review
|
@wardpeet Would you like to add the Can you estimate when this PR will be reviewed? I had to add a really nasty workaround to our website to be able to go live and would like to remove it as soon as possible. |
|
I don't know if it works that way but i'll review it tomorrow, if not feel free to re-open and re-create it |
|
Unfortunately it did not work. Anyway, I don't want to interrupt the review process. Thank you for trying… I am looking forward to the outcome of the review! |
vladar
approved these changes
Apr 26, 2021
This was referenced Apr 26, 2021
Closed
vladar
pushed a commit
that referenced
this pull request
Apr 27, 2021
…ents (#26861) * add generic type to useScrollRestoration hook this is required to match the type of `useRef` which requires the target element type to be specified. The hook can be used like the following: ```typescript const MyComponent: React.FunctionComponent = () => { const scrollRestorationProps = useScrollRestoration<HTMLDivElement>(`some-key`) return ( <div {...scrollRestorationProps} style={{ overflow: `auto` }} > Test </div> ) } ``` Fixes: #26458 * add tests for useScrollRestoration hook * fix useScrollResotration to update position on location change Previously, the scroll position was only updated when the using component was re-rendered. This did not work when the hook is used in a wrapping Layout component, becaus its persitent over location changes. Adding the location key to useEffect will cause the scroll position is updated every time the key changes. * lint/ts fixes Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com> (cherry picked from commit f57efab)
vladar
pushed a commit
that referenced
this pull request
Apr 27, 2021
…ents (#26861) (#31079) * add generic type to useScrollRestoration hook this is required to match the type of `useRef` which requires the target element type to be specified. The hook can be used like the following: ```typescript const MyComponent: React.FunctionComponent = () => { const scrollRestorationProps = useScrollRestoration<HTMLDivElement>(`some-key`) return ( <div {...scrollRestorationProps} style={{ overflow: `auto` }} > Test </div> ) } ``` Fixes: #26458 * add tests for useScrollRestoration hook * fix useScrollResotration to update position on location change Previously, the scroll position was only updated when the using component was re-rendered. This did not work when the hook is used in a wrapping Layout component, becaus its persitent over location changes. Adding the location key to useEffect will cause the scroll position is updated every time the key changes. * lint/ts fixes Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com> (cherry picked from commit f57efab) Co-authored-by: Michael van Engelshoven <michael@van-engelshoven.de>
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.
Description
Main focus of this PR is to fix the
useScrollRestorationhook to work in layout components which are not re-rendered on a location change.To be able to check the results I added previously missing tests. For this I addded some generic typings to the hook to be able to use it well typed in the tests on a div element (have a look at #26458).
Documentation
This should not affect the currently documented usage.
Related Issues
Fixes #26458