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

Author: J-Sek

packages/vuetify/src/components/VNumberInput/VNumberInput.tsx

@@ -15,7 +15,7 @@ import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, nextTick, onMounted, ref, shallowRef, toRef, watch, watchEffect } from 'vue'
+import { computed, nextTick, ref, shallowRef, toRef, watch, watchEffect } from 'vue'
 import { clamp, escapeForRegex, extractNumber, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
@@ -200,10 +200,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     watch(() => props.precision, () => formatInputValue())
     watch(() => props.minFractionDigits, () => formatInputValue())
 
-    onMounted(() => {
-      clampModel()
-    })
-
     function inferPrecision (value: number | null) {
       if (value == null) return 0
       const str = value.toString()

packages/vuetify/src/components/VNumberInput/__tests__/VNumberInput.spec.browser.tsx

@@ -157,24 +157,52 @@ describe('VNumberInput', () => {
   })
 
   describe('native number input quirks', () => {
-    it('should not bypass min', async () => {
+    it('should auto-clamp after interaction', async () => {
       const model = ref(1)
       render(() =>
         <VNumberInput min={ 5 } max={ 15 } v-model={ model.value } />
       )
 
+      await expect.element(screen.getByCSS('input')).toHaveValue('1')
+      expect(model.value).toBe(1)
+
+      await userEvent.click(screen.getByCSS('input'))
+      await userEvent.tab()
+
       await expect.element(screen.getByCSS('input')).toHaveValue('5')
       expect(model.value).toBe(5)
     })
 
-    it('should not bypass max', async () => {
+    it('should apply increments within the range', async () => {
       const model = ref(20)
       render(() =>
         <VNumberInput min={ 5 } max={ 15 } v-model={ model.value } />
       )
 
-      await expect.element(screen.getByCSS('input')).toHaveValue('15')
-      expect(model.value).toBe(15)
+      await expect.element(screen.getByCSS('input')).toHaveValue('20')
+      expect(model.value).toBe(20)
+
+      await userEvent.click(screen.getByCSS('input'))
+      await userEvent.keyboard('{arrowDown}')
+
+      await expect.element(screen.getByCSS('input')).toHaveValue('14')
+      expect(model.value).toBe(14)
+    })
+
+    it('should auto-correct when incrementing against the limit', async () => {
+      const model = ref(-33)
+      render(() =>
+        <VNumberInput min={ -10 } max={ 20 } v-model={ model.value } precision={ 2 } step={ 0.5 } />
+      )
+
+      await expect.element(screen.getByCSS('input')).toHaveValue('-33.00')
+      expect(model.value).toBe(-33)
+
+      await userEvent.click(screen.getByCSS('input'))
+      await userEvent.keyboard('{arrowDown}')
+
+      await expect.element(screen.getByCSS('input')).toHaveValue('-10')
+      expect(model.value).toBe(-10)
     })
 
     it('supports decimal step', async () => {