Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toast doesn't perform dedup as stated in the docs #3609

Closed
codetheweb opened this issue Mar 18, 2021 · 3 comments
Closed

Toast doesn't perform dedup as stated in the docs #3609

codetheweb opened this issue Mar 18, 2021 · 3 comments

Comments

@codetheweb
Copy link
Contributor

codetheweb commented Mar 18, 2021

馃悰 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
Copy link

d4ncer commented Mar 23, 2021

Having the same issue.

@segunadebayo
Copy link
Member

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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants