dismissAfter in toastConfig isn't effective

[jaymehta-twilio]

Hi team,

I'm using the toast component with a custom redux action that we've created for our project like this :

const deleteFailureToastConfig: any = {
        id: "delete-sink",
        message: deleteSinkErrorMsg,
        variant: toastVariants.error,
        dismissAfter: 4000,
      };
      dispatch(toastActions.addToast(deleteFailureToastConfig));

The addToast accepts toast config of type ToasterToast which accepts the prop dismissAfter. I'm attaching the video to showcase that it doesn't dismiss after a given number in milliseconds. Am I missing anything here ? Thanks.

Screen.Recording.2021-02-28.at.2.23.01.PM.mov

[SiTaggart]

Hi, you mention a custom redux action, does that mean you are storing that state in Redux and not using the useToater hook provided by Paste?

[jaymehta-twilio]

That's correct. We aren't using that hook as part of the console. We're using our own hook -

const toaster = useZenToaster();

  return <Toaster {...toaster} />;

[SiTaggart]

Hi there.

Yeah I suspected that might be the case. It's the hook that does the handling of the timeout. Toaster is purely presentational.

As you are handling state in your own hook in console, you'll need to be handling the timeout there for correctly dismissing toasts after a certain time.

[jaymehta-twilio]

hmm, okay. I'll dig into useToaster to replicate the behavior. Thanks 🙏🏽