fix: prevent non-numeric input on firefox and Safari

Author: davidnixon

src/components/CvNumberInput/CvNumberInput.vue

@@ -98,7 +98,7 @@
 </template>
 
 <script setup>
-import { computed, ref, useSlots } from 'vue';
+import { computed, ref, useSlots, nextTick } from 'vue';
 import Add16 from '@carbon/icons-vue/es/add/16';
 import Subtract16 from '@carbon/icons-vue/es/subtract/16';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
@@ -114,7 +114,7 @@ const props = defineProps({
   disabled: Boolean,
   modelValue: {
     type: [String, Number],
-    default: '',
+    default: undefined,
   },
   formItem: {
     type: Boolean,
@@ -190,18 +190,23 @@ const modelValueType = typeof props.modelValue;
 const valuesToNaN = ['', null, undefined];
 
 const formatInputValueType = value => {
-  if (modelValueType === 'string') return value.toString();
+  if (modelValueType === 'string') return Number(value).toString();
   // According to Vue2 component if there is no value NaN is emitted
   return valuesToNaN.includes(value) ? NaN : Number(value);
 };
 
+const displayValue = ref(props.modelValue || props.min);
 const internalValue = computed({
   get() {
-    return props.modelValue;
+    return props.modelValue || displayValue.value;
   },
   set(value) {
-    const valueFormatted = formatInputValueType(value);
-    onInput(valueFormatted);
+    displayValue.value = formatInputValueType(value);
+    if (Number.isNaN(displayValue.value) || displayValue.value === 'NaN') {
+      displayValue.value = 0;
+      nextTick(() => (displayValue.value = NaN));
+    }
+    onInput(displayValue.value);
   },
 });