fix(VNumberInput): clearing v-number-input with backspace resets to 0

[EvgenyWas]

Description

The useValidation composable doesn't perform validation when the input value changes to null. When resetting the input, it sets the value to an empty string. Instead of assigning 0, the model should be reset to match this behavior. Using null for resetting is not viable because validation won't be triggered. Therefore, the model value should remain as the empty string in such cases to ensure proper validation behavior.
fixes #20607

Markup:

<template>
  <v-app>
    <v-container>
      <v-number-input
        ref="input"
        :model-value="model"
        :rules="rules"
        validate-on="input"
        @update:model-value="onChange"
      />
      <br />
      <pre>{{ inputToJSON }}</pre>
    </v-container>
  </v-app>
</template>

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

  const input = ref()

  const model = ref()

  const rules = ref([
    // required validation
    value => {
      console.log('required', value)
      return (
        (value !== null && typeof value !== 'undefined' && value !== '') ||
        'required'
      )
    },
    // min validation
    value => {
      return value >= 5 || 'should be greater or equal 5'
    },
    // max validation
    value => {
      return value <= 10 || 'should be lower or equal 10'
    },
  ])

  const onChange = value => {
    console.log('onChange', value)
    model.value = value
  }

  const inputToJSON = computed(() => {
    return JSON.stringify(input.value, null, 2)
  })
</script>

[yuwu9145]

Clearing number via backspace currently results in warning:

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Number with value 0, got String with value "". 
  at <VNumberInput ref="input" model-value="" rules= (3) [ƒ, ƒ, ƒ]  ... > 
  at <VContainer> 
  at <VApp> 
  at <Playground> 
  at <App>

modelValue here should be strictly enforced with type number | null, probably try to set _model.value to null when backspace to empty string.

[EvgenyWas]

Hey @yuwu9145, thanks for the review!

As I described in the PR description - the useValidation composable doesn't perform validation when the input value changes to null. When resetting the input, it sets the value to an empty string. Instead of assigning 0, the model should be reset to match this behavior. Using null for resetting is not viable because validation won't be triggered. Therefore, the model value should remain as the empty string in such cases to ensure proper validation behavior.

I think it might be worth of refactoring to extend the model type with string. WDYT?

[J-Sek]

I could put || val === '' here (PR #20252) and it would just work without any issues with TS nor warnings.

[yuwu9145]

I still believe model value should be set to null in number input.

As for the issue of null doesn't trigger validation, it's a separate issue that should be resolved in validation composable demo

[yuwu9145]

#20765

This PR should aim to make number input work consistently with text field in terms of validation, but model value type is kept with number | null

[EvgenyWas]

It happens because of this condition in useValidation composable, but it was added over two years ago and I assume it can affect many places if we change it.

[yuwu9145]

Yeah, it's not a concern in VNumberInput and validation issue should be carefully resolved/tested in #20765

[EvgenyWas]

Then we can close this PR or just solve the first part of the issue regarding resetting the value?

[yuwu9145]

Just need to resolve the issue regarding resetting the value to null, and ignore validation.

I have pushed a commit, see if you had any comment

[EvgenyWas]

@yuwu9145 it's fine for me, thanks for your participation and prompt reply! :)

[yuwu9145]

Is this change just a code format? Or was there any logically concrete reason behind it? @EvgenyWas

[EvgenyWas]

Only code format to remove the exclamation mark. I believe it's easier to read especially when there is the same condition with another case.