feat(VNumberInput): show error state when out of range (#21825)

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, onMounted, ref, shallowRef, toRef, watch } from 'vue'
 import { clamp, escapeForRegex, extractNumber, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
@@ -131,37 +131,53 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     )
 
     const _inputText = shallowRef<string | null>(null)
-    watchEffect(() => {
+    const _lastParsedValue = shallowRef<number | null>(null)
+
+    watch(model, val => {
       if (
         isFocused.value &&
           !controlsDisabled.value &&
-          Number(_inputText.value) === model.value
+          Number(_inputText.value) === val
       ) {
         // ignore external changes while typing
         // e.g. 5.01{backspace}2 » should result in 5.02
         //      but we emit '5' in and want to preserve '5.0'
-      } else if (model.value == null) {
+      } else if (val == null) {
         _inputText.value = null
-      } else if (!isNaN(model.value)) {
-        _inputText.value = correctPrecision(model.value)
+        _lastParsedValue.value = null
+      } else if (!isNaN(val)) {
+        _inputText.value = correctPrecision(val)
+        _lastParsedValue.value = Number(_inputText.value.replace(decimalSeparator.value, '.'))
       }
-    })
+    }, { immediate: true })
+
     const inputText = computed<string | null>({
       get: () => _inputText.value,
       set (val) {
         if (val === null || val === '') {
           model.value = null
           _inputText.value = null
+          _lastParsedValue.value = null
           return
         }
         const parsedValue = Number(val.replace(decimalSeparator.value, '.'))
-        if (!isNaN(parsedValue) && parsedValue <= props.max && parsedValue >= props.min) {
-          model.value = parsedValue
+        if (!isNaN(parsedValue)) {
           _inputText.value = val
+          _lastParsedValue.value = parsedValue
+
+          if (parsedValue <= props.max && parsedValue >= props.min) {
+            model.value = parsedValue
+          }
         }
       },
     })
 
+    const isOutOfRange = computed(() => {
+      if (_lastParsedValue.value === null) return false
+      const numberFromText = Number(_inputText.value)
+      return numberFromText !== clamp(numberFromText, props.min, props.max)
+    })
+
     const canIncrease = computed(() => {
       if (controlsDisabled.value) return false
       return (model.value ?? 0) as number + props.step <= props.max
@@ -474,6 +490,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
           v-model={ inputText.value }
           v-model:focused={ isFocused.value }
           validationValue={ model.value }
+          error={ isOutOfRange.value || undefined }
           onBeforeinput={ onBeforeinput }
           onFocus={ onFocus }
           onBlur={ onBlur }

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

@@ -4,7 +4,7 @@ import { VForm } from '@/components/VForm'
 
 // Utilities
 import { render, screen, userEvent } from '@test'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 describe('VNumberInput', () => {
   it.each([
@@ -341,4 +341,77 @@ describe('VNumberInput', () => {
       expect(screen.getByCSS('input')).toHaveValue(expected)
     })
   })
+
+  describe('should indicate range error', () => {
+    // enable in 4.0.0
+    it.todo('on mount', async () => {
+      const model = ref(-13)
+      const onChange = vi.fn()
+      render(() => (
+        <VNumberInput
+          v-model={ model.value }
+          min={ 5 }
+          onUpdate:modelValue={ onChange }
+        />
+      ))
+
+      await nextTick()
+      expect(model.value).toBe(-13)
+      expect(onChange).not.toHaveBeenCalled()
+      expect(screen.getByCSS('.v-input')).toHaveClass('v-input--error')
+    })
+
+    it('while typing', async () => {
+      const model = ref(null)
+      const onChange = vi.fn()
+      render(() => (
+        <VNumberInput
+          v-model={ model.value }
+          min={ 5 }
+          onUpdate:modelValue={ onChange }
+        />
+      ))
+
+      const vInput = screen.getByCSS('.v-input')
+
+      await userEvent.tab()
+      await userEvent.keyboard('1')
+      expect(vInput).toHaveClass('v-input--error')
+
+      await userEvent.keyboard('2')
+      expect(vInput).not.toHaveClass('v-input--error')
+      expect(model.value).toBe(12)
+
+      await userEvent.keyboard('{arrowLeft}{arrowLeft}-')
+      expect(vInput).toHaveClass('v-input--error')
+    })
+
+    it('while typing', async () => {
+      const model = ref(0)
+      const onChange = vi.fn()
+      render(() => (
+        <VNumberInput
+          v-model={ model.value }
+          max={ 50 }
+          onUpdate:modelValue={ onChange }
+        />
+      ))
+
+      await nextTick()
+      const vInput = screen.getByCSS('.v-input')
+      expect(vInput).not.toHaveClass('v-input--error')
+
+      model.value = 50.55 // will be rounded to 51
+      await nextTick()
+      expect(vInput).toHaveClass('v-input--error')
+
+      model.value = 99
+      await nextTick()
+      expect(vInput).toHaveClass('v-input--error')
+
+      model.value = 45
+      await nextTick()
+      expect(vInput).not.toHaveClass('v-input--error')
+    })
+  })
 })