Bläddra i källkod

Fix scroll not resetting on page change

Fixes an issue where scroll would stay where it was on the previous page
when clicking the next or previous page button when on the replicas or
migrations list pages.
Sergiu Miclea 4 år sedan
förälder
incheckning
0699cb4f27

+ 4 - 0
src/components/ui/Lists/FilterList/FilterList.tsx

@@ -62,6 +62,8 @@ type State = {
 }
 @observer
 class FilterList extends React.Component<Props, State> {
+  mainListWrapperRef: React.RefObject<HTMLDivElement> = React.createRef()
+
   state: State = {
     items: [],
     filterStatus: 'all',
@@ -194,6 +196,7 @@ class FilterList extends React.Component<Props, State> {
       if (this.props.onPaginatedItemsChange) {
         this.props.onPaginatedItemsChange(this.paginatedItems)
       }
+      this.mainListWrapperRef.current?.scrollTo(0, 0)
     })
   }
 
@@ -240,6 +243,7 @@ class FilterList extends React.Component<Props, State> {
           largeDropdownActionItems={this.props.largeDropdownActionItems}
         />
         <MainList
+          mainListWrapperRef={this.mainListWrapperRef}
           loading={this.props.loading}
           items={this.paginatedItems}
           selectedItems={this.state.selectedItems}

+ 2 - 1
src/components/ui/Lists/MainList/MainList.tsx

@@ -98,6 +98,7 @@ type Props = {
   emptyListExtraMessage?: string,
   emptyListButtonLabel?: string,
   onEmptyListButtonClick?: () => void,
+  mainListWrapperRef?: React.RefObject<HTMLDivElement>,
 }
 @observer
 class MainList extends React.Component<Props> {
@@ -180,7 +181,7 @@ class MainList extends React.Component<Props> {
     }
 
     return (
-      <Wrapper>
+      <Wrapper ref={this.props.mainListWrapperRef}>
         {this.props.loading || this.props.items.length === 0 || this.props.showEmptyList
           ? <Separator /> : null}
         {renderContent()}