vuetifyjs / vuetifyjs/vuetify

[Bug Report][4.1.10] VPagination ellipsis flickers indefinitely in a flex container at length 3

Open
#23,145 1 comment 0 reactions 1 assignee View on GitHub

@Haviles04 is already working on this.

Since Aug 25, 2026.

C: VPagination T: bug
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

Environment

Vuetify Version: 4.1.10
Vue Version: 3.x (Vuetify Play default)
OS: Not specified

Steps to reproduce
  1. Place a v-pagination with :length="3" inside a <div class="d-flex">
  2. Load the page and observe the component without interacting with it
<template>
  <div class="text-center">
    <div class="d-flex">
      <v-pagination v-model="page" :length="3" rounded="circle"></v-pagination>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const page = ref(1)
</script>
Expected Behavior

A stable set of page buttons. With length="3" and no width constraint there is nothing to truncate, so no ellipsis should appear and the rendered output should not change while the component is idle.

Actual Behavior

The ellipsis flickers continuously. The component oscillates between renders on its own, with no user interaction and no external state change.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Reported by @hankthetank4 in Discord; filed on their behalf.

Root cause appears to be a measurement/render feedback loop, from reading the source (not yet confirmed under a debugger):

VPagination measures itself with a ResizeObserver and derives how many buttons to show from that measurement:

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VPagination/VPagination.tsx#L159-L175

contentRect.widthgetMax()maxButtonstotalVisiblerange. In a normal block container the width is imposed by the parent, so the measurement is stable. As a flex item the component shrink-wraps to its own content instead, so changing the number of rendered buttons changes the measured width, which re-runs the observer and can select a different button count — the measurement depends on the content it determines.

This looks adjacent to #22907 / #22912. That fix guards the same path:

if (props.totalVisible == null && length.value < 3) {
  return createRange(length.value, start.value)
}

length < 3 short-circuits before any measurement is used, which is why lengths 1 and 2 are stable in a flex container. length="3" is the first value that falls through to the measurement path, and it is exactly the value in this reproduction — so the guard may stop one case short of the underlying problem.

If that reading is right, raising the threshold would only move the boundary; the durable fix is to stop letting the rendered content feed back into the width the component measures.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.