OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Scroll to top when item search page number changes

Browse source 
We also didn't need the query one, because we now `key` the `SearchResults` by the query, so the container becomes empty-then-full-again, which resets scroll back to top.
This commit is contained in:
Emi Matchu 2022-10-14 19:33:45 -07:00
parent 45b0aba736
commit a9aeab12a3
1 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app/WardrobePage/SearchPanel.js
View file

@ -26,12 +26,11 @@ function SearchPanel({
searchQueryRef, searchQueryRef,
firstSearchResultRef, firstSearchResultRef,
}) { }) {
// Whenever the search query changes, scroll back up to the top! const scrollToTop = React.useCallback(() => {
React.useEffect(() => {
if (scrollContainerRef.current) { if (scrollContainerRef.current) {
scrollContainerRef.current.scrollTop = 0; scrollContainerRef.current.scrollTop = 0;
} }
}, [query, scrollContainerRef]); }, [scrollContainerRef]);
// Sometimes we want to give focus back to the search field! // Sometimes we want to give focus back to the search field!
const onMoveFocusUpToQuery = (e) => { const onMoveFocusUpToQuery = (e) => {
@ -63,6 +62,7 @@ function SearchPanel({
outfitState={outfitState} outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit} dispatchToOutfit={dispatchToOutfit}
firstSearchResultRef={firstSearchResultRef} firstSearchResultRef={firstSearchResultRef}
scrollToTop={scrollToTop}
onMoveFocusUpToQuery={onMoveFocusUpToQuery} onMoveFocusUpToQuery={onMoveFocusUpToQuery}
/> />
</Box> </Box>
@ -82,6 +82,7 @@ function SearchResults({
outfitState, outfitState,
dispatchToOutfit, dispatchToOutfit,
firstSearchResultRef, firstSearchResultRef,
scrollToTop,
onMoveFocusUpToQuery, onMoveFocusUpToQuery,
}) { }) {
const [currentPageNumber, setCurrentPageNumber] = React.useState(1); const [currentPageNumber, setCurrentPageNumber] = React.useState(1);
@ -97,6 +98,9 @@ function SearchResults({
// Background we want to restore the previous one! // Background we want to restore the previous one!
const [itemIdsToReconsider] = React.useState(outfitState.wornItemIds); const [itemIdsToReconsider] = React.useState(outfitState.wornItemIds);
// Whenever the page number changes, scroll back to the top!
React.useEffect(() => scrollToTop(), [currentPageNumber, scrollToTop]);
// You can use UpArrow/DownArrow to navigate between items, and even back up // You can use UpArrow/DownArrow to navigate between items, and even back up
// to the search field! // to the search field!
const goToPrevItem = React.useCallback( const goToPrevItem = React.useCallback(