Fix dash-table tooltip ref

Author: T4rk1n

components/dash-table/src/dash-table/components/ControlledTable/fragments/TableTooltip.tsx

@@ -1,19 +1,25 @@
-import React, {Component} from 'react';
+import React, {Component, createRef} from 'react';
 
 import Tooltip, {ITooltipProps, Arrow} from 'dash-table/components/Tooltip';
 import {getPositionalParent} from 'dash-table/components/tooltipHelper';
-import ReactDOM from 'react-dom';
+
 import {isEqual} from 'core/comparer';
 
 interface IState {
     arrow?: Arrow;
     cell?: any;
 }
 
-export default class TableTooltip extends Component<ITooltipProps, IState> {
+export default class TableTooltip extends Component<
+    Omit<ITooltipProps, 'divRef'>,
+    IState
+> {
+    tooltipRef: React.RefObject<HTMLElement>;
     constructor(props: ITooltipProps) {
         super(props);
 
+        this.tooltipRef = createRef();
+
         this.state = {
             arrow: Arrow.Bottom
         };
@@ -40,7 +46,7 @@ export default class TableTooltip extends Component<ITooltipProps, IState> {
         return (
             <Tooltip
                 key='tooltip'
-                ref='tooltip'
+                divRef={this.tooltipRef}
                 arrow={arrow}
                 {...this.props}
             />
@@ -50,7 +56,7 @@ export default class TableTooltip extends Component<ITooltipProps, IState> {
     private adjustPosition() {
         const {cell} = this.state;
 
-        const el = ReactDOM.findDOMNode(this.refs.tooltip) as any;
+        const el = this.tooltipRef.current;
 
         const positionalParent = getPositionalParent(el);
 

components/dash-table/src/dash-table/components/Tooltip/index.tsx

@@ -1,5 +1,5 @@
 import * as R from 'ramda';
-import React, {PureComponent} from 'react';
+import React, {Component} from 'react';
 import {Remarkable} from 'remarkable';
 
 import {isEqual} from 'core/comparer';
@@ -17,6 +17,7 @@ export enum Arrow {
 export interface ITooltipProps {
     arrow?: Arrow;
     className?: string;
+    divRef: any;
     tooltip: {
         delay: number;
         duration: number;
@@ -32,10 +33,7 @@ interface ITooltipState {
     md: Remarkable;
 }
 
-export default class Tooltip extends PureComponent<
-    ITooltipProps,
-    ITooltipState
-> {
+export default class Tooltip extends Component<ITooltipProps, ITooltipState> {
     constructor(props: ITooltipProps) {
         super(props);
 
@@ -85,6 +83,7 @@ export default class Tooltip extends PureComponent<
 
         return (
             <div
+                ref={this.props.divRef}
                 className='dash-tooltip'
                 data-attr-anchor={arrow}
                 style={{visibility: display ? 'visible' : 'hidden'}}