From 8b0bd0d5892d91699571b110adee89857078e9e0 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Fri, 26 Aug 2022 14:35:30 +0400
Subject: [PATCH] fix: toast double update bug

---
 .changeset/pink-singers-kneel.md              |  5 +++
 packages/components/toast/src/toast.utils.ts  | 11 +++--
 .../toast/stories/toast.stories.tsx           | 40 +++++++++++++++++++
 3 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/pink-singers-kneel.md

diff --git a/.changeset/pink-singers-kneel.md b/.changeset/pink-singers-kneel.md
new file mode 100644
index 00000000000..8898343c94c
--- /dev/null
+++ b/.changeset/pink-singers-kneel.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/toast": patch
+---
+
+Fix issue where toast double update doesn't work
diff --git a/packages/components/toast/src/toast.utils.ts b/packages/components/toast/src/toast.utils.ts
index 8f022ad9c7f..5bbd77040f3 100644
--- a/packages/components/toast/src/toast.utils.ts
+++ b/packages/components/toast/src/toast.utils.ts
@@ -29,10 +29,13 @@ export function findToast(toasts: ToastState, id: ToastId) {
  * Given the toast manager state, finds the position of the toast that
  * matches the `id`
  */
-export const getToastPosition = (toasts: ToastState, id: ToastId) =>
-  Object.values(toasts)
-    .flat()
-    .find((toast) => toast.id === id)?.position
+export function getToastPosition(toasts: ToastState, id: ToastId) {
+  for (const [position, values] of Object.entries(toasts)) {
+    if (findById(values, id)) {
+      return position as ToastPosition
+    }
+  }
+}
 
 /**
  * Given the toast manager state, checks if a specific toast is
diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx
index bfde566d60d..00bfc520a64 100644
--- a/packages/components/toast/stories/toast.stories.tsx
+++ b/packages/components/toast/stories/toast.stories.tsx
@@ -425,3 +425,43 @@ export const ToastWithCustomIcon = () => {
     </ButtonGroup>
   )
 }
+
+export function WithDoubleUpdate() {
+  const toast = useToast()
+  const toastIdRef = React.useRef<ToastId>()
+
+  function updateOne() {
+    if (toastIdRef.current) {
+      toast.update(toastIdRef.current, { description: "1st update" })
+    }
+  }
+
+  function updateTwo() {
+    if (toastIdRef.current) {
+      toast.update(toastIdRef.current, { description: "2nd update" })
+    }
+  }
+
+  function addToast() {
+    toastIdRef.current = toast({
+      position: "bottom-right",
+      description: "some text",
+    })
+  }
+
+  return (
+    <div>
+      <Button onClick={addToast} type="button">
+        Toast
+      </Button>
+
+      <Button onClick={updateOne} type="button" variant="outline">
+        Update last toast
+      </Button>
+
+      <Button onClick={updateTwo} type="button" variant="outline">
+        Update last toast 2
+      </Button>
+    </div>
+  )
+}