v6 - Limit number of toasts issue

[coltenkrauter]

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

What is the current behavior?

<ToastContainer 
    transition={Flip} 
    limit={5}
    toastClassName="toast--base"
    closeOnClick={false}
 />

I would expect this to limit to only 5 toasts at a time. But, if I spam the toast button, it will limit to only 5 toasts until one of the toasts time-out and dissappear... At this time the limit seems to not be working and I can display lots of toasts.

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:

I think that my description in current behavior is sufficient for someone to recreate the bug.

What is the expected behavior?
I expect for the limit of toasts to work even if the toast button is being spammed.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Mac OS
Chrome

Package versions

{
  "name": "react-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@starbucks/pattern-library": "20.2.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.37",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "node-sass": "4.13.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "7.2.0",
    "react-scripts": "3.4.1",
    "react-toastify": "6.0.0-rc.0",
    "redux": "4.0.5",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[fkhadra]

Hey @coltenkrauter,

This seems really weird. May I suggest to delete node_modules and reinstall the dependencies? It works has expected in the codesanbox below.

[coltenkrauter]

@fkhadra I was able to recreate the bug using that CodeSandbox. Just press the Clcik me button constantly (and quickly) for about 10 seconds without stopping.

If you can't recreate it then I will share a video of me manifesting the bug.

[fkhadra]

@coltenkrauter I've been able to reproduce the issue but your really need to click like crazy 🤣. I'll check what is goiing on under the hood. Thanks for reporting the issue

[coltenkrauter]

Thanks!

[fkhadra]

@coltenkrauter I found a way to fix the issue. I need to clean the code first and I'll publish the fix in the coming days.

[coltenkrauter]

@fkhadra That's great, thanks!!

[fkhadra]

@coltenkrauter I published the rc.1. Normally, yarn add react-toastify@next or npm i react-toastify@next should be enough

[coltenkrauter]

Excellent! I tested everything and it is working great. Thanks for the speedy turnaround.