[Bug Report][3.3.21] v-text-field[type=number] using v-model.number + vee-validate not working when typing decimal

[quangquyen1410]

Environment

Vuetify Version: 3.3.21 Vue Version: 3.3.4 Browsers: Edge 117.0.2045.60 OS: Windows

Steps to reproduce

Build a form with vee-validate, utilizing the 'useField' function to set up fields with validation and error messages. Wrap the form within a 'v-card' component. Create a v-text-field[type=number] with v-model.number. When entering a decimal number, the dot ('.') will be automatically removed.

Expected Behavior

The period ('.') will be not remove

Actual Behavior

The period ('.') will be automatically removed

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

If you remove the 'error-messages' prop or remove the 'v-card' and 'v-card-text' elements, the form will function as expected. I tested it using Vue DevTools and observed that the update:model-value event is triggered when I type a dot. However, it should not be emitted in this case.

[quangquyen1410]

I've developed a workaround using v-text-field-number to manage and convert numbers. It functions well for basic number fields. However, when this field has a slot, the decimal point ('.') is automatically deleted. Furthermore, the update:model-value event is still activated when I input a decimal point.

This is v-text-field-number component:

<template>
  <VTextField
    v-bind="$attrs"
    :model-value="modelValue"
    type="number"
    @update:model-value="onUpdateModelValue"
  >
    <template
      v-for="(slot, name) in ($slots as InstanceType<typeof VTextField>['$slots'])"
      :key="name"
      #[name]="scope"
    >
      <slot v-if="slot" :name="name" v-bind="scope" />
    </template>
  </VTextField>
</template>

<script setup lang="ts">
import { VTextField } from 'vuetify/lib/components/index.mjs';

const modelValue = defineModel<number>();

const onUpdateModelValue = (value: string) => {
  if (!value) {
    modelValue.value = undefined;
    return;
  }
  modelValue.value = Number(value);
};
</script>

[JulianPinzaru]

I have the exactly same issue. Additionally, when I have a custom slot used within v-text-field, it totally ignores the dot "." when typing in a number with decimal point https://play.vuetifyjs.com/playgrounds/rQqFgA

Please check it out by typing i.e: 4.5 in the first input and then in the second input that doesn't have the slot. More than that, I noticed that v-text-field starts working as expected when I comment out / remove the v-form wrapper around those two text fields regardless of using or not using slots.

I think this issue needs to be reopened.

[quangquyen1410]

Hi @JulianPinzaru, I just tried the latest versions of both Vuetify and Vue. It seems they inadvertently fixed it.

See playground: https://play.vuetifyjs.com/#eNqNVV1P2zAU/SueX8qkJobB0FYV1H0waZP2oTHtZdmDmzitwR+R7YSiwn/ftZ20LqAOhKDxPffec869Tv+ssTUledc0edcyPMFTWxreOGSZa5vzQiHEZaONQ2vUWvZJGzkOHzgTFbpHtdESjTrGso4KXlHHRjs5htVbVBuDpVbWx5ZUVYJdtnPJ3RiQ0NLXB/zZ0OvgZaHSFGjSsgmqWMklFWPEjNHmK7OWLtgmz1M78FkIjXrkaByfO3R2jtbxM4KWrjUKvXjRobs7NArFAkOE7vuENeKKO07F79i5VRWruWKg3QN26GkVtQCNVNpBIG2Tzh6uBcuFXhyMIshBxRvulqNx1GihMrCAv1MSJwKzgAfHZCPA5TCZaZeV1FTh8+Ypc2zlwVHitPaOzmxoclbggWOBkdLDyFApqLUQbVbZSYE3yaGmL5fV3tPtMRiZSV0xkatWzpmB1N7oAqcoQedMQPDjU0F32zCIxQq7oUkYRSbjYD2zdNApluySDQbQ0nFwOImE2NwpcF5oz7YxwMfcggsdNZwqb00NvsJBTys6BmagfqhTEkrsq6pbJ2A3oMhgqBTeUDQrBS+v4Xmz5LDYqc/+56eP7VTvO/r/qbAtZjtm4uc8LMKA32zCcAIPU5KsEB5jZ2Eba77Ir6xWcP/Diha41LLhgpnvTWyJJ8PyFpgKoW++hDNnWtbfFMhZsvL6ifMru/JnBf7h5ZsODNrEHDULUB3CF5ffgHAShBVrBaD3BME0LVrPMcLewwUF2gkusP0c3kdcLX7Zi5Vjyg6iPNFw0wK+wPCO+rBH+pbucX4c8goFv+BjfONlkjYPnIyB3TLQJdJdOtfYCSFlpSANLhTvTK6YI6qRZAYwYlrluGRZpeXsOD/JX70lFbcuPc+Zldnc6BswF6ok2qGA4zWs+X979UhocZofHcYW/VkGt9j6Ho9qkzBNkxkGb0XjXX+epgdpO7oexPZoS75zniMwgc9O8qOj/E2vMgk8Vhn4VqxzWgub0YY/V2OaMzvNX+eHRPA5gQaEg7RVaDNsEL4f42gCbFIcAf77D8U7d7U=

[JulianPinzaru]

Hi @quangquyen1410 The example you shared doesn't match the description of the issue from above, feel free to take another look. https://play.vuetifyjs.com/playgrounds/rQqFgA

The bug is still there.