From 6f857ce325054ac71a5f858aad7065a3df538b91 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 26 Aug 2025 20:00:21 -0700
Subject: [PATCH] fix(pagination): `on:change` dispatches with correct value

---
 src/Pagination/Pagination.svelte    |  8 ++++----
 tests/Pagination/Pagination.test.ts | 27 +++++++++++++++++++++++----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index abf7b149..578c0c63 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -135,8 +135,8 @@
         hideLabel
         noLabel
         inline
-        on:change={() => {
-          dispatch("change", { pageSize });
+        on:update={(event) => {
+          dispatch("change", { pageSize: event.detail });
         }}
         bind:selected={pageSize}
       >
@@ -165,8 +165,8 @@
         labelText="Page number, of {totalPages} pages"
         inline
         hideLabel
-        on:change={() => {
-          dispatch("change", { page });
+        on:update={(event) => {
+          dispatch("change", { page: event.detail });
         }}
         bind:selected={page}
       >
diff --git a/tests/Pagination/Pagination.test.ts b/tests/Pagination/Pagination.test.ts
index da905c76..6ce54289 100644
--- a/tests/Pagination/Pagination.test.ts
+++ b/tests/Pagination/Pagination.test.ts
@@ -75,7 +75,7 @@ describe("Pagination", () => {
     const select = screen.getByRole("combobox", { name: "Items per page:" });
     await user.selectOptions(select, "15");
 
-    expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 });
+    expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 15 });
     expect(consoleLog).toHaveBeenCalledWith("update", {
       pageSize: 15,
       page: 1,
@@ -91,7 +91,7 @@ describe("Pagination", () => {
     const pageSelect = screen.getAllByRole("combobox");
     await user.selectOptions(pageSelect[0], "5");
 
-    expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 });
+    expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 5 });
     expect(consoleLog).toHaveBeenCalledWith("update", { pageSize: 5, page: 1 });
   });
 
@@ -169,7 +169,7 @@ describe("Pagination", () => {
     // Change page size
     const pageSizeSelect = screen.getAllByRole("combobox");
     await user.selectOptions(pageSizeSelect[0], "15");
-    expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 });
+    expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 15 });
     expect(consoleLog).toHaveBeenCalledWith("update", {
       pageSize: 15,
       page: 1,
@@ -178,7 +178,7 @@ describe("Pagination", () => {
     // Change page
     const pageSelect = screen.getAllByRole("combobox");
     await user.selectOptions(pageSelect[1], "2");
-    expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 });
+    expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 });
     expect(consoleLog).toHaveBeenCalledWith("update", {
       pageSize: 15,
       page: 2,
@@ -257,4 +257,23 @@ describe("Pagination", () => {
 
     expect(screen.getByText(/1–10 of 100000/)).toBeInTheDocument();
   });
+
+  it("should dispatch change event with new value, not previous value", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(Pagination, {
+      props: { totalItems: 102, pageSizes: [10, 15, 20] },
+    });
+
+    const pageSizeSelect = screen.getByRole("combobox", {
+      name: "Items per page:",
+    });
+    await user.selectOptions(pageSizeSelect, "15");
+
+    expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 15 });
+
+    const pageSelect = screen.getAllByRole("combobox")[1];
+    await user.selectOptions(pageSelect, "2");
+
+    expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 });
+  });
 });