diff --git a/src/components/VDisk/VDisk.tsx b/src/components/VDisk/VDisk.tsx index aaf084b60..366e1e869 100644 --- a/src/components/VDisk/VDisk.tsx +++ b/src/components/VDisk/VDisk.tsx @@ -46,18 +46,15 @@ export const VDisk = ({ const anchor = React.useRef(null); - const handleShowPopup = () => { + const debouncedHandleShowPopup = debounce(() => { setIsPopupVisible(true); onShowPopup?.(); - }; + }, DEBOUNCE_TIMEOUT); - const handleHidePopup = () => { + const debouncedHandleHidePopup = debounce(() => { setIsPopupVisible(false); onHidePopup?.(); - }; - - const debouncedHandleShowPopup = debounce(handleShowPopup, DEBOUNCE_TIMEOUT); - const debouncedHandleHidePopup = debounce(handleHidePopup, DEBOUNCE_TIMEOUT); + }, DEBOUNCE_TIMEOUT); let vDiskPath: string | undefined; @@ -85,7 +82,10 @@ export const VDisk = ({ className={b()} ref={anchor} onMouseEnter={debouncedHandleShowPopup} - onMouseLeave={debouncedHandleHidePopup} + onMouseLeave={() => { + debouncedHandleShowPopup.cancel(); + debouncedHandleHidePopup(); + }} > { + const debouncedHandleShowPopup = debounce(() => { setIsPopupVisible(true); onShowPopup?.(); - }; + }, DEBOUNCE_TIMEOUT); - const handleHidePopup = () => { + const debouncedHandleHidePopup = debounce(() => { setIsPopupVisible(false); onHidePopup?.(); - }; - - const debouncedHandleShowPopup = debounce(handleShowPopup, DEBOUNCE_TIMEOUT); - const debouncedHandleHidePopup = debounce(handleHidePopup, DEBOUNCE_TIMEOUT); + }, DEBOUNCE_TIMEOUT); const renderVDisks = () => { if (!vDisks?.length) { @@ -113,7 +110,10 @@ export const PDisk = ({ to={pDiskPath} className={b('content')} onMouseEnter={debouncedHandleShowPopup} - onMouseLeave={debouncedHandleHidePopup} + onMouseLeave={() => { + debouncedHandleShowPopup.cancel(); + debouncedHandleHidePopup(); + }} >