[Bug Report][3.6.6] Issues with v-number-input: Manual Input and Step Handling

[desaisoftwaree]

Environment

Vuetify Version: 3.6.6
Vue Version: 3.4.27
Browsers: Chrome 125.0.0.0
OS: Windows

Description

I encountered two issues with the v-number-input component in Vuetify when using the step and min properties. Additionally, there is a missing feature that would enhance the user experience.

Problems

1. Manual Input Behavior:

   • When manually inputting a number, the component allows any value to be entered, even if it does not comply with the step value. For instance, if the min value is set to 4 and the step is 4, manually inputting "5" is allowed, but it should automatically round to the nearest valid step value (e.g., 4 or 8).
   • When manually inputting "12", the component ends up displaying "42" or allows values like "412" which should not happen. This indicates that the input handling needs to be more restrictive to respect the step property.

2. Long Press on Control Buttons:

   • The control buttons for incrementing and decrementing the value do not support a long press. The expected behavior is that a long press on these buttons should continuously increase or decrease the value until the button is released, respecting the min, max, and step properties.

Expected Behavior

1. Manual Input Validation:

   • When a user manually inputs a number that does not comply with the step value, the component should automatically adjust the input to the nearest valid step. For example, if the user inputs "5", it should automatically change to "4" or "8" based on the nearest valid step.

2. Long Press Feature:

   • The control buttons should support long press functionality, allowing the value to continuously increment or decrement while the button is pressed, respecting the min, max, and step properties.

Example Code

Here is the code used to reproduce the issues:

<template>
  <v-app>
    <v-container>
      <v-number-input
        v-model="value"
        control-variant="split"
        :step="4"
        :min="4"
      />
    </v-container>
  </v-app>
</template>

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

const value = ref(4)
</script>

### Reproduction Link
[https://play.vuetifyjs.com/#...](https://play.vuetifyjs.com/#eNpdkM0KAjEMhF8l9KKC6148ySr4HK6HukYo9CekaS/iu9t2FX8upfkyDDM53VXkqT8SbXJCtVODoCOrBQ+jBxhyp4natw1T8KKNR36hBn1yF+TOeEryxgC5c+GKdj+qrG3CUX1W1YWD7bJmo70USSRr5Fuyi4JUFtsf6Iz/Zf07Wv+frZI5+tB/VSpjnNiQQERJczPjKLDAHRhv8IAbBweLco1Flbe0UaCVgH3VLLer6jr7FAf1WPtkbXvOTwKUatU=)


<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

[desaisoftwaree]

Reproduction Link
https://play.vuetifyjs.com/#eNpdkM0KAjEMhF8l9KKC6148ySr4HK6HukYo9CekaS/iu9t2FX8upfkyDDM53VXkqT8SbXJCtVODoCOrBQ+jBxhyp4natw1T8KKNR36hBn1yF+TOeEryxgC5c+GKdj+qrG3CUX1W1YWD7bJmo70USSRr5Fuyi4JUFtsf6Iz/Zf07Wv+frZI5+tB/VSpjnNiQQERJczPjKLDAHRhv8IAbBweLco1Flbe0UaCVgH3VLLer6jr7FAf1WPtkbXvOTwKUatU=