Skip to content

feat(VNumberInput): do not clamp value on mounted #21826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: next
Choose a base branch
from

Conversation

J-Sek
Copy link
Contributor

@J-Sek J-Sek commented Jul 26, 2025

Description:

Clamping initial value is not consistent in general - e.g. value can be loaded from API with a slight delay, and then it is not auto-corrected.

Component should respect the value, and only show error state (#21825)

Markup:

<template>
  <v-app>
    <v-container>
      <v-card class="mx-auto pa-6 my-4" style="max-width: 900px">
        <v-row>
          <v-col cols="4">
            <v-number-input v-model="model.min" label="Min" />
          </v-col>
          <v-col cols="4">
            <v-number-input v-model="model.value" label="Value" :min="model.min" :max="model.max" />
          </v-col>
          <v-col cols="4">
            <v-number-input v-model="model.max" label="Max" />
          </v-col>
        </v-row>
        <small>Note: currently only "error" state triggers when typing or changing the range</small>
        <br />
        <small>In v4: we will drop auto-clamp onMounted</small>
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'

  const model = reactive({ min: 0, value: 12, max: 10 })
</script>

@J-Sek J-Sek self-assigned this Jul 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant