Toast not disappearing

[haydencarlson]

toast.success("Your passwords do not match", {autoClose: 4000});

Using toast.dismiss(<toast_id) . Even when I leave it default it won't work.

No errors in console and I tried modifying the package I just can't figure it out.
Anyone else experienced this or have any ideas?

[fkhadra]

hello @haydencarlson,
Can you provide all the snippet ? So I can help you ?

Thanks

[haydencarlson]

I have a view which contains the toast container

import React, { Component } from 'react';
import NavBar from '../components/navBar.js';
import { ToastContainer } from 'react-toastify';

export default class Authorization extends Component {
  render() {
    return (
      <div className="AuthorizationPageContainer">
        <NavBar/>
        <ToastContainer/>
      </div>
    )
  }
}

In one of my components:

handleFormSubmit = (e) => {
    e.preventDefault();
    if (this.state.password === this.state.password_confirmation) {
    } else {
      toast.success("Your passwords do not match", {autoClose: 4000});
    }
  }

It shows up fine, and everything seems to be working it just won't auto close unless I explicitly call toast.dismiss passing in the ID. I'd prefer not to run setTimeouts everytime haha

[haydencarlson]

Anyone?

[fkhadra]

Hey @haydencarlson,

I took your code but I'm unable to reproduce the issue :( . Can you tell me more about your setup please ?

• Browser version
• Are you using react-router ?
• React version ?

[haydencarlson]

Version 54.0.2840.90 (64-bit)

Using react router yes

React: 15.4.1

[fkhadra]

Hello @haydencarlson,

I think I have an idea why your toast it's not removed.

Your Authorization Component is getting mounted and umounted over and over again, so the <ToastContainer/> will be unmounted as well. When the ToastContainer is umounted, all the related events are unbound.

Move the ToastContainer at the root of your application to solve the issue.

[haydencarlson]

@fkhadra you were right.

Thanks !
Closing.

[ecdeveloper]

I'm getting the same exact issue. The ToastContainer is only defined in App.jsx:

const App = () => (
  <BrowserRouter>
    <main className="container">
      // Some more stuff goes here
      <Routes />
      <footer className="footer">Footer</footer>

      <ToastContainer autoClose={1000} />
    </main>
  </BrowserRouter>
);

And then calling in a component:

toast.success("Some success message", {
    className: "toast-success",
});

The toast shows up, shows the progress bar, although no progress bar animation is happening and the toast doesn't disappear after 1s.

React: 16.5.2
Chrome: 71.0.3578.98
Using react-router

Thoughts?

[fkhadra]

Hello @ecdeveloper,

Could you reproduce the issue on codesandbox please.

PS: next time don't hesitate to open a new issue. It's easier for me to keep a track on.

Thanks

[ecdeveloper]

hi @fkhadra,

Thanks for your reply. In sandbox it all works fine, so I think there may be some conflicting module (maybe?) in my setup. Will try to debug myself, thank you.

[ecdeveloper]

Magic. Removed the existing package. Reinstalled it. Everything works like a charm now. I think there might've been a glitch in the older version I was using before.

[fkhadra]

@ecdeveloper perfect probably a cache issue or something like that. I'm glad you fixed your issue 👍

[kkomelin]

My problem was that if the progress bar was disabled hideProgressBar={true} at the ToastContainer props level, toasts didn't disappear automatically and autoClose={5000} setting was ignored. I've fixed it following @fkhadra advice and moving ToastContainer into my root component (App).

[ricardoribas]

This problems seems to persist. I am using the latest version (8.0.1). Reducer is being executed and triggering the REMOVE action.

[fkhadra]

@ricardoribas please provide a reproduction otherwise I cannot help :(

[ricardoribas]

After researching a bit, it seemed that was a matter of importing the css file. Problem solved.

Additionally, there is any prop to disable the animations?

[Ckbhatia]

@fkhadra I don't know what's wrong with my configuration. Auto disappearing isn't working for me.

Brave Browser version: 1.36.109 Chromium
Also tested on the latest Firefox.
OS: Mac OS Monterey

react-toastify: ^8.2.0

Other project dependencies:

    "@apollo/react-hooks": "^3.1.5",
    "@material-ui/core": "^4.11.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "apollo-boost": "^0.4.9",
    "graphql": "^15.2.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "3.4.1",
    "styled-components": "^5.3.3",
    "tailwindcss": "^3.0.22",
    "twin.macro": "^2.8.2"

import 'react-toastify/dist/ReactToastify.css'

Imported CSS in 'index.js'

import React from "react";
import ReactDOM from "react-dom";
import { ToastContainer } from "react-toastify";
import "./index.css";
import 'react-toastify/dist/ReactToastify.css';
import GlobalStyles from './styles/GlobalStyles'
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
<React.StrictMode>
    <GlobalStyles />
    <App />
    <ToastContainer />
</React.StrictMode>,
document.getElementById("root")
);

Usage:

   toast.loading(status, {
    position: "top-right",
    autoClose: 1000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: true,
});

It gets removed only if I click or drag it.

[ghazale-javaheri]

same here, it doesn't disappear even if put the ToastContainer in the root of application

[TeoAvignon]

I still have the issue with progress toast on Mozilla (but not Chrome.)
A possible workaround is to set the progress to null and add an autoClose duration.

toast.update(toastMapId, {
            render: `100%`,
            type: 'success',
            hideProgressBar: false,
            autoClose: 1000,
            progress: null,
          });