Prefer ref over findDOMNode to make unit tests not flaky (#4372)

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

src/renderer/components/dialog/dialog.tsx

@@ -22,7 +22,7 @@
 import "./dialog.scss";
 
 import React from "react";
-import { createPortal, findDOMNode } from "react-dom";
+import { createPortal } from "react-dom";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { reaction } from "mobx";
 import { Animate } from "../animate";
@@ -50,6 +50,7 @@ interface DialogState {
 @observer
 export class Dialog extends React.PureComponent<DialogProps, DialogState> {
   private contentElem: HTMLElement;
+  ref = React.createRef<HTMLDivElement>();
 
   static defaultProps: DialogProps = {
     isOpen: false,
@@ -69,9 +70,8 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
     isOpen: this.props.isOpen,
   };
 
-  get elem() {
-    // eslint-disable-next-line react/no-find-dom-node
-    return findDOMNode(this) as HTMLElement;
+  get elem(): HTMLElement {
+    return this.ref.current;
   }
 
   get isOpen() {
@@ -154,7 +154,11 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
 
     className = cssNames("Dialog flex center", className, { modal, pinned });
     let dialog = (
-      <div className={className} onClick={stopPropagation}>
+      <div
+        className={className}
+        onClick={stopPropagation}
+        ref={this.ref}
+      >
         <div className="box" ref={e => this.contentElem = e}>
           {this.props.children}
         </div>