fix: disable input controls when there is only one page in TablePagination (#1213)

Author: imanish003

src/components/TablePagination/TablePaginationControls/TablePaginationControls.test.tsx

@@ -154,4 +154,48 @@ describe("<TablePaginationControls />", () => {
       document.querySelector(".description")?.textContent,
     ).not.toBeUndefined();
   });
+
+  it("disables page input when there is only one page", () => {
+    render(
+      <TablePaginationControls
+        visibleCount={5}
+        itemName="item"
+        pageLimits={[20, 50, 100]}
+        totalItems={5}
+        currentPage={1}
+        pageSize={20}
+        onPageChange={jest.fn()}
+        onPageSizeChange={jest.fn()}
+      />,
+    );
+
+    const pageInput = screen.getByRole("spinbutton", {
+      name: Label.PAGE_NUMBER,
+    });
+    expect(pageInput).toBeDisabled();
+    expect(pageInput).toHaveAttribute("min", "1");
+    expect(pageInput).toHaveAttribute("max", "1");
+  });
+
+  it("enables page input when there are multiple pages", () => {
+    render(
+      <TablePaginationControls
+        visibleCount={20}
+        itemName="item"
+        pageLimits={[20, 50, 100]}
+        totalItems={100}
+        currentPage={1}
+        pageSize={20}
+        onPageChange={jest.fn()}
+        onPageSizeChange={jest.fn()}
+      />,
+    );
+
+    const pageInput = screen.getByRole("spinbutton", {
+      name: Label.PAGE_NUMBER,
+    });
+    expect(pageInput).not.toBeDisabled();
+    expect(pageInput).toHaveAttribute("min", "1");
+    expect(pageInput).toHaveAttribute("max", "5");
+  });
 });

src/components/TablePagination/TablePaginationControls/TablePaginationControls.tsx

@@ -103,6 +103,9 @@ const TablePaginationControls = ({
     onPageSizeChange(parseInt(e.target.value));
   };
 
+  const isInputDisabled = !totalPages || totalPages == 1;
+  const maxPageValue = typeof totalPages === "number" ? totalPages : 1;
+
   return (
     <div
       className={classnames("pagination", className)}
@@ -117,7 +120,7 @@ const TablePaginationControls = ({
         className="back"
         appearance="base"
         hasIcon
-        disabled={currentPage === 1}
+        disabled={isInputDisabled || currentPage === 1}
         onClick={() => handleDecrementPage(currentPage)}
         {...previousButtonProps}
       >
@@ -137,6 +140,9 @@ const TablePaginationControls = ({
             onChange={handleInputPageChange}
             value={currentPage}
             type="number"
+            disabled={isInputDisabled}
+            min={1}
+            max={maxPageValue}
           />{" "}
           {typeof totalPages === "number" ? <>of&nbsp;{totalPages}</> : null}
         </>
@@ -146,7 +152,7 @@ const TablePaginationControls = ({
         className="next"
         appearance="base"
         hasIcon
-        disabled={currentPage === totalPages}
+        disabled={isInputDisabled || currentPage === totalPages}
         onClick={() => handleIncrementPage(currentPage, totalPages)}
         {...nextButtonProps}
       >

src/components/TablePagination/TablePaginationControls/__snapshots__/TablePaginationControls.test.tsx.snap

@@ -26,6 +26,8 @@ exports[`<TablePaginationControls /> renders table pagination controls and match
   aria-invalid="false"
   class="p-form-validation__input u-no-margin--bottom pagination-input"
   id="paginationPageInput"
+  max="5"
+  min="1"
   type="number"
   value="0"
 />

src/components/TablePagination/__snapshots__/TablePagination.test.tsx.snap

@@ -35,7 +35,10 @@ exports[`<TablePagination /> renders table pagination and matches the snapshot 1
       <input
         aria-invalid="false"
         class="p-form-validation__input u-no-margin--bottom pagination-input"
+        disabled=""
         id="paginationPageInput"
+        max="1"
+        min="1"
         type="number"
         value="1"
       />