Skip to content

fix(VNumberInput): resync display after model is overridden - #23099

Open
lazerg wants to merge 1 commit into
vuetifyjs:masterfrom
lazerg:fix/23098-number-input-spin-desync
Open

fix(VNumberInput): resync display after model is overridden#23099
lazerg wants to merge 1 commit into
vuetifyjs:masterfrom
lazerg:fix/23098-number-input-spin-desync

Conversation

@lazerg

@lazerg lazerg commented Aug 11, 2026

Copy link
Copy Markdown
Contributor

Description

The spin buttons set the display text from model.value + step and then push that number into the model. When the parent intercepts update:model-value and writes back a different value, model never changes, so the watcher that refreshes the display never runs and the input keeps showing the rejected number. Stepping the other way then looks like it skips a step.

toggleUpDown now compares the model against the text once the update has settled and reformats the text when the two disagree.

Fixes #23098

Markup:

<template>
  <v-app>
    <v-container>
      <v-number-input
        :model-value="value"
        @update:model-value="value = Math.max(0, $event)"
      />
      <div>model: {{ value }}</div>
    </v-container>
  </v-app>
</template>

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

  const value = ref(0)
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug Report][4.1.8] VNumberInput spin buttons can de-sync the display value

1 participant