fix(VPagination): visible items for selection in middle (#20322)

fixes #18853 Co-authored-by: jsek <[email protected]>
vuetifyjs · Jan 27, 2025 · 36c4d46 · 36c4d46
1 parent 7dd5a20
commit 36c4d46
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VPagination/VPagination.tsx b/packages/vuetify/src/components/VPagination/VPagination.tsx
@@ -209,7 +209,7 @@ export const VPagination = genericComponent<VPaginationSlots>()({
         const rangeStart = length.value - rangeLength + start.value
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)]
       } else {
-        const rangeLength = Math.max(1, totalVisible.value - 3)
+        const rangeLength = Math.max(1, totalVisible.value - 2)
         const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value]
       }

diff --git a/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx b/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx
@@ -82,6 +82,10 @@ describe('VPagination', () => {
 
     // 5 buttons and 1 ellipsis
     cy.get('.v-pagination__item').should('have.length', 6)
+
+    cy.get('.v-btn').contains('4').click()
+    // 5 buttons and 2 ellipsis
+    cy.get('.v-pagination__item').should('have.length', 7)
   })
 
   it('should limit items when not enough space', () => {