Toast doesn't perform dedup as stated in the docs

[codetheweb]

🐛 Bug report

On the docs page for the Toast component, it says that the id prop is

Mostly used when you need to prevent duplicate.

However, duplicate toasts can be created when passing the ID.

💥 Steps to reproduce

1. Click "Click me!" multiple times.

💻 Link to reproduction

For some reason, it's not rendering correctly in the sandbox; so I deployed it to Vercel.

🧐 Expected behavior

Duplicate IDs are ignored.

🌍 System information

Software	Version(s)
Chakra UI	1.3.4
Browser	Firefox 86
Operating System	macOS 11.2.3

[d4ncer]

Having the same issue.

[segunadebayo]

Here's how to solve this issue:

function Foo() {
  const toast = useToast();
  const { toggleColorMode } = useColorMode();
  const id = "test-toast";
  return (
    <>
      <Button
        onClick={() => {
          if (!toast.isActive(id)) {
            toast({
              id,
              title: "Test Toast"
            });
          }
        }}
      >
        Click me!
      </Button>
      <Button onClick={() => toggleColorMode()}>Toggle Mode</Button>
    </>
  );
}

https://codesandbox.io/s/duplicate-toasts-forked-t41gq?file=/src/App.tsx:156-604

[codetheweb]

Thanks. I was going to update the docs but I see you already did. 😛