fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

update with progress not working #986

Closed thomasouvre closed 8 months ago

thomasouvre commented 11 months ago

Do you want to request a feature or report a bug? bug

What is the current behavior? Using the progress option with toast.update causes the notification to instantly disappear when changing type or render

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below: https://codesandbox.io/s/react-toastify-update-bug-forked-8xzgts?file=/src/index.js

What is the expected behavior? The notification should remains on the screen and finish the animation, according to autoClose.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Bug occurred at least on react-toastify 9.1.3 with react 16.8.2 and 18.2.0.

JoolsMcFly commented 9 months ago

Hi.

I had the same problem and found @fkhadra 's answer which helped.

fkhadra commented 8 months ago

Hey @thomasouvre, a bit late for the reply but the issue was in the update function. This one works

function update(id, time, value) {
  value += 0.1;
  if (value >= 1) {
    toast.update(id, {
      progress: null,
      render: "ok",
      type: toast.TYPE.SUCCESS,
      autoClose: 5000
    });
    return;
  }

  toast.update(id, {
    progress: value
  });
  setTimeout(() => {
    update(id, time, value);
  }, time);
}