fix(pagination): duplicate first page button (#207)

GovTechSG · Aug 6, 2024 · e43ec0d · e43ec0d
2 parents 9ddf22f + 9e26a79
commit e43ec0d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/components/Pagination/sgds-pagination.ts b/src/components/Pagination/sgds-pagination.ts
@@ -139,7 +139,12 @@ export class SgdsPagination extends SgdsElement {
   }
 
   private _renderFirstPage() {
-    const sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);
+    let sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);
+
+    if (this.pages.length - sanitizeStartPage < this.limit) {
+      sanitizeStartPage = this.pages.length + 1 - this.limit;
+    }
+
     if (sanitizeStartPage > 1) {
       return html`
         <li key=${1} class="page-item ${this.currentPage === 1 ? "active" : ""}">

diff --git a/test/pagination.test.ts b/test/pagination.test.ts
@@ -473,6 +473,21 @@ describe("sgds-pagination", () => {
     expect(ellipsises?.length).to.equal(1);
     expect(ellipsises?.[0]).to.exist;
   });
+  it("showFirstPage set to true and limit set to page.length, no duplicate first page", async () => {
+    //8 pages, at page 8
+    const el = (await fixture(
+      html`
+        <sgds-pagination dataLength="40" limit="8" itemsPerPage="5" currentPage="8" showFirstPage></sgds-pagination>
+      `
+    )) as SgdsPagination;
+    const pageOne = el.shadowRoot?.querySelectorAll("li")[1];
+    const pageTwo = el.shadowRoot?.querySelectorAll("li")[2];
+    const pageThree = el.shadowRoot?.querySelectorAll("li")[3];
+
+    expect(pageOne?.textContent).to.contain("1");
+    expect(pageTwo?.textContent).to.contain("2");
+    expect(pageThree?.textContent).to.contain("3");
+  });
   it("showLastPage set to true, last page always appears and only last ellipsis shown", async () => {
     //8 pages, at page 1
     const el = (await fixture(