fix: handled 0 total itams in pagination (#16876)

carbon-design-system · Jul 1, 2024 · a2d4764 · a2d4764
1 parent 04d8d1c
commit a2d4764
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/react/src/components/Pagination/Pagination-test.js b/packages/react/src/components/Pagination/Pagination-test.js
@@ -221,5 +221,18 @@ describe('Pagination', () => {
         document.querySelector('.cds--select__page-number')
       ).not.toBeInTheDocument();
     });
+
+    it('should handle zero total items', () => {
+      render(
+        <Pagination
+          totalItems={0}
+          pageSizes={[10, 20]}
+          pageSize={10}
+          page={1}
+        />
+      );
+
+      expect(screen.getByText('0–0 of 0 items')).toBeInTheDocument();
+    });
   });
 });
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
@@ -218,7 +218,7 @@ const Pagination = React.forwardRef(function Pagination(
   });
   const totalPages = totalItems
     ? Math.max(Math.ceil(totalItems / pageSize), 1)
-    : NaN;
+    : 1;
   const backButtonDisabled = disabled || page === 1;
   const backButtonClasses = cx({
     [`${prefix}--pagination__button`]: true,
@@ -366,7 +366,9 @@ const Pagination = React.forwardRef(function Pagination(
         <span
           className={`${prefix}--pagination__text ${prefix}--pagination__items-count`}>
           {pagesUnknown || !totalItems
-            ? itemText(pageSize * (page - 1) + 1, page * pageSize)
+            ? totalItems === 0
+              ? itemRangeText(0, 0, 0)
+              : itemText(pageSize * (page - 1) + 1, page * pageSize)
             : itemRangeText(
                 Math.min(pageSize * (page - 1) + 1, totalItems),
                 Math.min(page * pageSize, totalItems),