浏览代码

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 年之前
父节点
当前提交
0699cb4f27
共有 2 个文件被更改,包括 6 次插入1 次删除
  1. 4 0
      src/components/ui/Lists/FilterList/FilterList.tsx
  2. 2 1
      src/components/ui/Lists/MainList/MainList.tsx

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

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

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

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