fix(toast): filter dismissed toasts in region (#489)

kobaltedev · Oct 7, 2024 · b1b6246 · b1b6246
1 parent 7789aa5
commit b1b6246
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/packages/core/src/toast/toast-region.tsx b/packages/core/src/toast/toast-region.tsx
@@ -157,7 +157,9 @@ export function ToastRegion<T extends ValidComponent = "div">(
 	const toasts = createMemo(() =>
 		toastStore
 			.toasts()
-			.filter((toast) => toast.region === local.regionId)
+			.filter(
+				(toast) => toast.region === local.regionId && toast.dismiss === false,
+			)
 			.slice(0, local.limit!),
 	);
 

diff --git a/packages/core/src/toast/toast.test.tsx b/packages/core/src/toast/toast.test.tsx
@@ -24,7 +24,7 @@ describe("Toast", () => {
 		rootProps: Partial<Toast.ToastRootProps> = {},
 		options?: ShowToastOptions,
 	) => {
-		toaster.show(
+		return toaster.show(
 			(props) => (
 				<Toast.Root {...rootProps} toastId={props.toastId}>
 					<Toast.Title data-testid="title">Title</Toast.Title>
@@ -507,6 +507,52 @@ describe("Toast", () => {
 			expect(toasts.length).toBe(limit);
 		});
 
+		it("should not use dismissed toasts for list", async () => {
+			const limit = 1;
+
+			let closeId: number;
+
+			const { getAllByRole, getByTestId } = render(() => (
+				<>
+					<button
+						type="button"
+						data-testid="dismiss-toast"
+						onClick={() => {
+							toaster.dismiss(closeId);
+						}}
+					>
+						Close a toast
+					</button>
+					<button
+						type="button"
+						data-testid="trigger"
+						onClick={() => {
+							closeId = showToast();
+						}}
+					>
+						Show Toast
+					</button>
+					<Toast.Region limit={limit}>
+						<Toast.List data-testid="custom-region" />
+					</Toast.Region>
+				</>
+			));
+
+			fireEvent.click(getByTestId("trigger"));
+
+			fireEvent.click(getByTestId("dismiss-toast"));
+
+			let toasts =
+				getByTestId("custom-region").querySelectorAll('[role="status"]');
+			expect(toasts.length).toBe(0);
+
+			fireEvent.click(getByTestId("trigger"));
+
+			toasts = getByTestId("custom-region").querySelectorAll('[role="status"]');
+
+			expect(toasts.length).toBe(1);
+		});
+
 		it("should render multiple regions simultaneously", async () => {
 			const { getByTestId } = render(() => (
 				<>