Add key to div around Pagination, instead of Pagination itself

Amsterdam · Nov 8, 2024 · be0a22f · be0a22f
1 parent 25a5d00
commit be0a22f
Showing 1 changed file with 22 additions and 2 deletions.
diff --git 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