fix: inability to update toast duration dynamically emilkowalski#529

Inability to update toast duration dynamically

closed emilkowalski#529

src/index.tsx

@@ -124,6 +124,10 @@ const Toast = (props: ToastProps) => {
 
   offset.current = React.useMemo(() => heightIndex * gap + toastsHeightBefore, [heightIndex, toastsHeightBefore]);
 
+  React.useEffect(() => {
+    remainingTime.current = duration;
+  }, [duration]);
+
   React.useEffect(() => {
     // Trigger enter animation without using CSS animation
     setMounted(true);

test/src/app/page.tsx

@@ -171,6 +171,23 @@ export default function Home({ searchParams }: any) {
       >
         Updated Toast
       </button>
+      <button
+        data-testid="update-toast-duration"
+        className="button"
+        onClick={() => {
+          const toastId = toast('My Unupdated Toast, Updated After 3 Seconds', {
+            duration: 10000,
+          });
+          setTimeout(() => {
+            toast('My Updated Toast, Close After 1 Second', {
+              id: toastId,
+              duration: 1000,
+            });
+          }, 3000);
+        }}
+      >
+        Updated Toast Duration
+      </button>
       <button
         data-testid="string-description"
         className="button"

test/tests/basic.spec.ts

@@ -178,6 +178,22 @@ test.describe('Basic functionality', () => {
     await expect(page.getByText('My Updated Toast')).toHaveCount(1);
   });
 
+  test('should update toast content and duration after 3 seconds', async ({ page }) => {
+    await page.getByTestId('update-toast-duration').click();
+
+    const initialToast = page.getByText('My Unupdated Toast, Updated After 3 Seconds');
+    await expect(initialToast).toBeVisible();
+
+    await page.waitForTimeout(3000);
+    const updatedToast = page.getByText('My Updated Toast, Close After 1 Second');
+    await expect(updatedToast).toBeVisible();
+
+    await expect(initialToast).not.toBeVisible();
+
+    await page.waitForTimeout(1200);
+    await expect(updatedToast).not.toBeVisible();
+  });
+
   test('cancel button is rendered with custom styles', async ({ page }) => {
     await page.getByTestId('custom-cancel-button-toast').click();
     const button = await page.locator('[data-cancel]');