From e146dff9daae5427ad20b8ea684f3c86e3a04dc7 Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Wed, 17 Nov 2021 18:38:42 +0200
Subject: [PATCH] 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 | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/dialog/dialog.tsx b/src/renderer/components/dialog/dialog.tsx
index 48569f1671..be28789eff 100644
--- a/src/renderer/components/dialog/dialog.tsx
+++ b/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>