Toast doesn't dismiss after..

[tomtobac]

hey team, I was trying to use Toaster component, as in the example, with a basic toast to be automatically dismissed with the property dismissAfter but it didn't work, either the setFocus property. As you can see, the alert should be closed after 1sec and the close button should be focused...

I have pinned my @twilio-paste/core to 4.1.0, it may has something to do...

Example here:
https://codesandbox.io/s/sample-using-core-and-icons-forked-w1ko4?file=/src/index.tsx

[kate-porter]

Hey @tomtobac - I've forwarded this onto our engineers, so they will take a look and let you know what might be going on here.

[kate-porter]

Hey @tomtobac - if you remove the id from the toaster, that will fix the issue. If that doesn't work for any reason, let us know!

[tomtobac]

Thanks @katieporter 👍 !

[SiTaggart]

So, you have uncovered some kind of bug that we need to investigate, but the good news is, you don't need to supply an ID for it to work.

The ID is optional, and useful if your application needs to keep track of a specific toast to programmatically dismiss it.

It should work though according to our docs, so we'll look at it. In the meantime remove setting an id for a toast via the useToaster hook and it should just work fine for your use case.

[tomtobac]

Thanks, yeah that's work!

[TheSisb]

Hi @tomtobac,

Chiming in a little late here but there's no bug in the Toaster, the bug is in the code example. This codesandbox shows it working: https://codesandbox.io/s/sample-using-core-and-icons-forked-37q4o?file=/src/index.tsx

The issue is that you're passing the same id to each generated toast, so when you close the toast, it's closing all toasts with the same id (all of them). Please make sure to pass a unique id to each toast.

[tomtobac]

hey @TheSisb, the problem is that the dismissAfter doesn't work, when you create a new toast it should be automatically closed and it doesn't do that... same for setFocus

[TheSisb]

Woops, misread and Simon's answer is indeed correct.

[SiTaggart]

Tracked it down, it only ever uses the generated ID for auto dismissing toasts https://github.com/twilio-labs/paste/blob/main/packages/paste-core/components/toast/src/useToaster.ts#L26

But duplicate IDs is also an issue in the original Sandbox too

[SiTaggart]

If you update your Paste packages, it should include a fix for this.

Thanks for spotting it!