From 71834e9fb24628cb52ebabeb0279c7e3769ad0eb Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 1 Apr 2022 15:20:37 +0300
Subject: [PATCH] Clean up Tooltip DOM

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/tooltip/tooltip.tsx | 32 +++++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx
index 9b753c251a..8c74c915dc 100644
--- a/src/renderer/components/tooltip/tooltip.tsx
+++ b/src/renderer/components/tooltip/tooltip.tsx
@@ -54,6 +54,7 @@ export class Tooltip extends React.Component<TooltipProps> {
 
   @observable.ref elem: HTMLElement;
   @observable activePosition: TooltipPosition;
+  @observable isDomNodeRendered = false;
   @observable isVisible = false;
 
   constructor(props: TooltipProps) {
@@ -61,6 +62,10 @@ export class Tooltip extends React.Component<TooltipProps> {
     makeObservable(this);
   }
 
+  get visible() {
+    return this.isVisible || this.props.visible;
+  }
+
   get targetElem(): HTMLElement {
     return document.getElementById(this.props.targetId);
   }
@@ -80,6 +85,10 @@ export class Tooltip extends React.Component<TooltipProps> {
 
   componentDidUpdate() {
     this.refreshPosition();
+
+    // this.isVisible should be updated after Tooltip DOM node rendered
+    // to show opening animation by adding classname
+    this.isVisible = this.isDomNodeRendered;
   }
 
   componentWillUnmount() {
@@ -89,13 +98,12 @@ export class Tooltip extends React.Component<TooltipProps> {
 
   @boundMethod
   protected onEnterTarget() {
-    this.isVisible = true;
-    this.refreshPosition();
+    this.isDomNodeRendered = true;
   }
 
   @boundMethod
   protected onLeaveTarget() {
-    this.isVisible = false;
+    this.isDomNodeRendered = false;
   }
 
   @boundMethod
@@ -103,6 +111,10 @@ export class Tooltip extends React.Component<TooltipProps> {
     const { preferredPositions } = this.props;
     const { elem, targetElem } = this;
 
+    if (!elem) {
+      return;
+    }
+
     let positions = new Set<TooltipPosition>([
       TooltipPosition.RIGHT,
       TooltipPosition.BOTTOM,
@@ -150,6 +162,10 @@ export class Tooltip extends React.Component<TooltipProps> {
   }
 
   protected setPosition(pos: { left: number; top: number }) {
+    if (!this.elem) {
+      return;
+    }
+
     const elemStyle = this.elem.style;
 
     elemStyle.left = `${pos.left}px`;
@@ -214,17 +230,21 @@ export class Tooltip extends React.Component<TooltipProps> {
   }
 
   render() {
-    const { style, formatters, usePortal, children, visible } = this.props;
+    const { style, formatters, usePortal, children } = this.props;
     const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
-      visible: visible ?? this.isVisible,
+      visible: this.visible,
       formatter: !!formatters,
     });
     const tooltip = (
-      <div className={className} style={style} ref={this.bindRef}>
+      <div className={className} style={style} ref={this.bindRef} role="tooltip">
         {children}
       </div>
     );
 
+    if (!this.isDomNodeRendered) {
+      return null;
+    }
+
     if (usePortal) {
       return createPortal(tooltip, document.body);
     }