From be0a22fbb43717d0c4c747a76f90e015f09b7a58 Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Fri, 8 Nov 2024 16:20:38 +0100
Subject: [PATCH] Add key to div around Pagination, instead of Pagination
 itself

---
 .../Pagination/Pagination.stories.tsx         | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/storybook/src/components/Pagination/Pagination.stories.tsx b/storybook/src/components/Pagination/Pagination.stories.tsx
index 208f22496c..935b5d8981 100644
--- a/storybook/src/components/Pagination/Pagination.stories.tsx
+++ b/storybook/src/components/Pagination/Pagination.stories.tsx
@@ -14,8 +14,28 @@ const meta = {
     maxVisiblePages: 7,
     totalPages: 10,
   },
-  argTypes: { onPageChange: { action: 'page changed' } },
-  render: (args) => <Pagination key={JSON.stringify(args)} {...args} />,
+  argTypes: {
+    onPageChange: { action: 'page changed' },
+    page: {
+      control: {
+        type: 'number',
+        min: 1,
+      },
+    },
+  },
+  decorators: [
+    // Wrap the story in a div with a key, to force a rerender when the 'page' arg changes
+    (Story, { args }) => (
+      <div key={JSON.stringify(args)} id="ams-docs-custom-root">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    html: {
+      root: '#ams-docs-custom-root',
+    },
+  },
 } satisfies Meta<typeof Pagination>
 
 export default meta