fix: make sure to clear all timers when unmount Popup (#5771)

Author: etienne-scaleway

.changeset/shaggy-rats-share.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Popup`: Make sure to clear all timers when unmount

packages/ui/package.json

@@ -17,6 +17,7 @@
     "typecheck": "tsc --noEmit",
     "size": "size-limit",
     "test:unit": "LC_ALL=en_US.UTF-8  pnpm vitest --run --config vitest.config.ts",
+    "test:watch": "LC_ALL=en_US.UTF-8  pnpm vitest watch --config vitest.config.ts",
     "test:unit:coverage": "pnpm test:unit --coverage",
     "lintpublish": "publint"
   },
@@ -107,4 +108,4 @@
     "react-toastify": "11.0.5",
     "react-use-clipboard": "1.0.9"
   }
-}
+}

packages/ui/src/components/Popup/__tests__/index.test.tsx

@@ -5,7 +5,7 @@ import {
   shouldMatchEmotionSnapshotWithPortal,
 } from '@utils/test'
 import type { ComponentProps } from 'react'
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import { Popup } from '../../index'
 
 describe('popup', () => {
@@ -212,4 +212,28 @@ describe('popup', () => {
       expect(PopupPortal).not.toBeVisible()
     })
   })
+
+  test(`should handle unmount correctly`, async () => {
+    const onClose = vi.fn()
+    const { unmount } = renderWithTheme(
+      <Popup onClose={onClose} text="test unmount!">
+        <p data-testid="unmount-children">Hover me</p>
+      </Popup>,
+    )
+
+    const input = screen.getByTestId('unmount-children')
+    await userEvent.hover(input)
+
+    await waitFor(
+      () => {
+        const PopupPortal = screen.getByText('test unmount!')
+        expect(PopupPortal).toBeVisible()
+      },
+      { timeout: 300 },
+    )
+
+    await userEvent.unhover(input)
+    unmount()
+    expect(onClose).not.toHaveBeenCalled()
+  })
 })

packages/ui/src/components/Popup/index.tsx

@@ -484,6 +484,21 @@ export const Popup = forwardRef(
       }
     }, [])
 
+    /**
+     * On unmount, clear all timers
+     */
+    useEffect(
+      () => () => {
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
+        if (debounceTimer.current) {
+          clearTimeout(debounceTimer.current)
+        }
+      },
+      [],
+    )
+
     /**
      * Will render children conditionally if children is a function or not.
      */