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

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}
       />
     );
   }

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) {