Autoclose not working if progressbar hidden via display non

[Ledzz]

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

What is the current behavior? Toast not autocloses if progress bar is hidden via display: none. Hiding it by default method (opacity) is not working because of IE11 flexbug (https://github.com/philipwalton/flexbugs/issues/111).

[adithyaBellary]

The progress bar styling needs to be there in order for the autoClose functionality to behave properly. It seems the logic of the two are tied. The way that I hid the progress bar was by setting the hideProgressBar param to false. That allowed the autoClose functionality while hide the progress bar.

[craigkovatch]

You must include the ReactToastify.minimal.css styles for this to work. The auto-close feature is dependent internally on the ProgessBar component, which does not properly fire the event necessary to trigger the feature unless those styles are present.

IMO this should be refactored or made much more clear.

[craigkovatch]

Not an IE11 issue btw @fkhadra

[craigkovatch]

FYI I am solving the problem without importing CSS by using TypeStyle, although any CSS injection tool will do:

const progressClassName = TypeStyle.style({
  animation: `${TypeStyle.keyframes({
    from: { transform: 'scaleX(1)' },
    to: { transform: 'scaleX(0)' },
  })} linear 1 forwards`
});

toast.configure({
  autoClose: 5000,
  hideProgressBar: true,
  progressClassName, // necessary for autoClose to work properly due to implementation details of react-toastify
});

[puopg]

I must agree, an element that must be rendered in the page that we can easily remove using css affecting the behavior of the toast is wild. I was scratching my head as to what was going on.

Please document this somewhere in the autoClose section: https://fkhadra.github.io/react-toastify/autoClose

[gajraj-gan]

I encountered this as well, weird!