From 7c3d2648039c41e9b44ee3aa0ce89d06d40dd1bc Mon Sep 17 00:00:00 2001
From: Luc Oth <othlu@fb.com>
Date: Fri, 3 Jul 2020 09:33:09 -0700
Subject: [PATCH] ManagedTable: pass an innerRef to bypass debounceRender

Summary: The ref would point to the DebouncedComponent instead of the ManagedTable passing an innerRef and handling binding manually.

Reviewed By: mweststrate

Differential Revision: D22374912

fbshipit-source-id: d404931405939ef8bfbde31f9aec7d531a3b62e3
---
 .../components/searchable/SearchableTable.tsx   |  2 +-
 .../src/ui/components/table/ManagedTable.tsx    | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/desktop/app/src/ui/components/searchable/SearchableTable.tsx b/desktop/app/src/ui/components/searchable/SearchableTable.tsx
index 86eb578df..60e34e414 100644
--- a/desktop/app/src/ui/components/searchable/SearchableTable.tsx
+++ b/desktop/app/src/ui/components/searchable/SearchableTable.tsx
@@ -157,7 +157,7 @@ class SearchableManagedTable extends PureComponent<Props, State> {
         filter={this.state.filterRows}
         rows={rows.filter(this.state.filterRows)}
         onAddFilter={addFilter}
-        ref={innerRef}
+        innerRef={innerRef}
       />
     );
   }
diff --git a/desktop/app/src/ui/components/table/ManagedTable.tsx b/desktop/app/src/ui/components/table/ManagedTable.tsx
index 2b8a07570..ccd245f52 100644
--- a/desktop/app/src/ui/components/table/ManagedTable.tsx
+++ b/desktop/app/src/ui/components/table/ManagedTable.tsx
@@ -137,6 +137,12 @@ export type ManagedTableProps = {
    * Whether to allow navigation via arrow keys. Default: true
    */
   enableKeyboardNavigation?: boolean;
+  /**
+   * Reference to the managed table.
+   */
+  innerRef?:
+    | React.MutableRefObject<ManagedTable | undefined>
+    | ((ref: ManagedTable | undefined) => void);
 };
 
 type ManagedTableState = {
@@ -209,10 +215,21 @@ export class ManagedTable extends React.Component<
 
   componentDidMount() {
     document.addEventListener('keydown', this.onKeyDown);
+
+    if (typeof this.props.innerRef === 'function') {
+      this.props.innerRef(this);
+    } else if (this.props.innerRef) {
+      this.props.innerRef.current = this;
+    }
   }
 
   componentWillUnmount() {
     document.removeEventListener('keydown', this.onKeyDown);
+    if (typeof this.props.innerRef === 'function') {
+      this.props.innerRef(undefined);
+    } else if (this.props.innerRef) {
+      this.props.innerRef.current = undefined;
+    }
   }
 
   UNSAFE_componentWillReceiveProps(nextProps: ManagedTableProps) {