From b0cacc1272456ca21a8b72e8340b3a59c92b50ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Tue, 11 Dec 2018 07:55:49 -0800
Subject: [PATCH] scrollToHighlightedRows

Summary:
Moving the scrolling to highlightedRows from `componentWillReceiveProps` to `componentDidUpdate` to make sure the rows are rendered, when this method is called.

The method is called, whenever the highlighted rows change, and on the first update. The reason why this is called on the first update is described in an inline comment.

Reviewed By: passy

Differential Revision: D13376566

fbshipit-source-id: 311a1f430e08fcfb4e31b39a2c5b34910694917f
---
 src/ui/components/table/ManagedTable.js | 44 ++++++++++++++++++-------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/ui/components/table/ManagedTable.js b/src/ui/components/table/ManagedTable.js
index 0479141f3..52a3fcd1f 100644
--- a/src/ui/components/table/ManagedTable.js
+++ b/src/ui/components/table/ManagedTable.js
@@ -153,11 +153,19 @@ class ManagedTable extends React.Component<
   tableRef: {
     current: null | List,
   } = React.createRef();
+
   scrollRef: {
     current: null | HTMLDivElement,
   } = React.createRef();
+
   dragStartIndex: ?number = null;
 
+  // We want to call scrollToHighlightedRows on componentDidMount. However, at
+  // this time, tableRef is still null, because AutoSizer needs one render to
+  // measure the size of the table. This is why we are using this flag to
+  // trigger actions on the first update instead.
+  firstUpdate = true;
+
   componentDidMount() {
     document.addEventListener('keydown', this.onKeyDown);
   }
@@ -177,19 +185,8 @@ class ManagedTable extends React.Component<
       });
     }
 
-    //
     if (this.props.highlightedRows !== nextProps.highlightedRows) {
       this.setState({highlightedRows: nextProps.highlightedRows});
-      const {current} = this.tableRef;
-      const {highlightedRows} = nextProps;
-      if (current && highlightedRows && highlightedRows.size > 0) {
-        const index = nextProps.rows.findIndex(
-          ({key}) => key === Array.from(highlightedRows)[0],
-        );
-        if (index >= 0) {
-          current.scrollToItem(index);
-        }
-      }
     }
 
     // if columnOrder has changed
@@ -214,16 +211,39 @@ class ManagedTable extends React.Component<
     }
   }
 
-  componentDidUpdate(prevProps: ManagedTableProps) {
+  componentDidUpdate(
+    prevProps: ManagedTableProps,
+    prevState: ManagedTableState,
+  ) {
     if (
       this.props.rows.length !== prevProps.rows.length &&
       this.state.shouldScrollToBottom &&
       this.state.highlightedRows.size < 2
     ) {
       this.scrollToBottom();
+    } else if (
+      prevState.highlightedRows !== this.state.highlightedRows ||
+      this.firstUpdate
+    ) {
+      this.scrollToHighlightedRows();
     }
+    this.firstUpdate = false;
   }
 
+  scrollToHighlightedRows = () => {
+    const {current} = this.tableRef;
+    const {highlightedRows} = this.state;
+    if (current && highlightedRows && highlightedRows.size > 0) {
+      const highlightedRow = Array.from(highlightedRows)[0];
+      const index = this.props.rows.findIndex(
+        ({key}) => key === highlightedRow,
+      );
+      if (index >= 0) {
+        current.scrollToItem(index);
+      }
+    }
+  };
+
   onCopy = () => {
     clipboard.writeText(this.getSelectedText());
   };