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