From c17d8bbfc40619fee853fa7d6ecad65d4872de05 Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Wed, 24 Nov 2021 14:39:28 -0300
Subject: [PATCH] [DDW-787] Fix closing discreet mode popover on staking page

---
 .../staking/stake-pools/StakePoolsList.js     | 21 +++++++++++++------
 .../components/staking/widgets/PoolPopOver.js |  1 +
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
index 8ef75504fc..3576464e32 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
@@ -4,23 +4,32 @@ import { observer } from 'mobx-react';
 import React, { useEffect, useState } from 'react';
 import type { ElementRef } from 'react';
 import { AutoSizer, List, WindowScroller } from 'react-virtualized';
-import { hideAll } from 'tippy.js';
+import { Instance } from 'tippy.js';
 import LoadingSpinner from '../../widgets/LoadingSpinner';
 import styles from './StakePoolsList.scss';
 import StakePool from '../../../domains/StakePool';
 import { ThumbPool } from '../widgets/ThumbPool';
 
+type TippyElement = Element & {
+  _tippy: Instance,
+};
+
 // Maximum number of stake pools for which we do not need to use the preloading
 const PRELOADER_THRESHOLD = 100;
 const POOL_THUMB_SIZE = 80;
 const POOL_THUMB_GRID_GAP = 10;
 
 /**
- * Utility function to programmatically hide all pop overs
+ * Utility function to programmatically hide the active pop over
  * This is used to hide the pool tooltips on scrolling the list
  */
-function hideAllPopOvers() {
-  hideAll();
+function hidePoolPopOver() {
+  const popOver: TippyElement | null = (document.querySelector('.PoolPopOver')
+    ?.parentElement: any);
+
+  if (popOver) {
+    popOver?._tippy.hide();
+  }
 }
 
 /**
@@ -57,12 +66,12 @@ export const StakePoolsList = observer((props: StakePoolsListProps) => {
       ? props.scrollElementRef.current
       : null;
     if (scrollContainer !== null) {
-      scrollContainer.addEventListener('scroll', hideAllPopOvers, true);
+      scrollContainer.addEventListener('scroll', hidePoolPopOver, true);
     }
     setTimeout(() => setIsLoading(false));
     return () => {
       if (scrollContainer !== null) {
-        scrollContainer.removeEventListener('scroll', hideAllPopOvers);
+        scrollContainer.removeEventListener('scroll', hidePoolPopOver);
       }
     };
   });
diff --git a/source/renderer/app/components/staking/widgets/PoolPopOver.js b/source/renderer/app/components/staking/widgets/PoolPopOver.js
index 8c073f71c8..434df19e26 100644
--- a/source/renderer/app/components/staking/widgets/PoolPopOver.js
+++ b/source/renderer/app/components/staking/widgets/PoolPopOver.js
@@ -55,6 +55,7 @@ export function PoolPopOver(props: {
       {isHovered ? ( // Init the pop over only when the target is hovered
         <PopOver
           interactive
+          className="PoolPopOver"
           delay={props.openWithDelay ? STAKE_POOL_TOOLTIP_HOVER_WAIT : 0}
           duration={0}
           appendTo={document.body}