Pagination: pagination input sanitizes decimal values (#452)

ClickHouse · Jul 25, 2024 · 4e0a802 · 4e0a802
1 parent a83228a
commit 4e0a802
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/components/Pagination/Pagination.stories.tsx b/src/components/Pagination/Pagination.stories.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Pagination } from "./Pagination";
 
 export default {
@@ -11,9 +12,25 @@ export default {
   },
 };
 
+const PaginationRenderer = () => {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const handleChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return (
+    <Pagination
+      currentPage={currentPage}
+      onChange={handleChange}
+    />
+  );
+};
+
 export const Playground = {
   args: {
     currentPage: 1,
     options: [250, 500],
   },
+  render: () => <PaginationRenderer />,
 };
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -83,16 +83,16 @@ export const Pagination = ({
   };
 
   const onChange = (value: string) => {
-    const valueToNumber = Number(value);
+    const sanitizedValue = parseInt(value, 10);
     if (
-      valueToNumber < 1 ||
+      sanitizedValue < 1 ||
       inputRef.current?.disabled ||
-      (typeof totalPages !== "undefined" ? valueToNumber > totalPages : false)
+      (typeof totalPages !== "undefined" ? sanitizedValue > totalPages : false)
     ) {
       return;
     }
 
-    onChangeProp(valueToNumber);
+    onChangeProp(sanitizedValue);
   };
 
   const onPageSizeChange = (value: string) => {