From fd3858c4ef46ac68a1860a3c0ec7deae3bafb642 Mon Sep 17 00:00:00 2001 From: "mat.tolladay" Date: Thu, 30 May 2024 12:41:18 +0200 Subject: [PATCH 1/2] NumberControlRenderer: added onBlur function The toPrecision() function is no longer used, only the toString(). This requires that the number update after the user changes focus. This is done by conveting the string to number and then back again to lose any trailing zeros. --- vue2-vuetify/src/controls/NumberControlRenderer.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/vue2-vuetify/src/controls/NumberControlRenderer.vue b/vue2-vuetify/src/controls/NumberControlRenderer.vue index 549dc2e4..3074dcd0 100644 --- a/vue2-vuetify/src/controls/NumberControlRenderer.vue +++ b/vue2-vuetify/src/controls/NumberControlRenderer.vue @@ -24,7 +24,7 @@ v-bind="vuetifyProps('v-text-field', { type: 'number' })" @input="onInputChange" @focus="isFocused = true" - @blur="isFocused = false" + @blur="onBlur" > @@ -86,7 +86,7 @@ const controlRenderer = defineComponent({ const numberAsString = inputStringIsInExponentForm ? result.toExponential() - : result.toPrecision(); + : result.toString(); const numberIsInExponentForm = numberAsString.includes('E') || numberAsString.includes('e'); @@ -100,6 +100,10 @@ const controlRenderer = defineComponent({ } this.onChange(result); }, + onBlur() : void { + isFocused = false + this.inputValue = Number(this.inputValue).toString(); + } toNumberOrString(value: string): number | string { // have a regex test before parseFloat to make sure that invalid input won't be ignored and will lead to errors, parseFloat will parse invalid input such 7.22m6 as 7.22 if (NUMBER_REGEX_TEST.test(value)) { From f4f7d963aedac7334df0d1f14ac01523e697f97e Mon Sep 17 00:00:00 2001 From: "mat.tolladay" Date: Thu, 30 May 2024 12:49:17 +0200 Subject: [PATCH 2/2] bug correction --- vue2-vuetify/src/controls/NumberControlRenderer.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/vue2-vuetify/src/controls/NumberControlRenderer.vue b/vue2-vuetify/src/controls/NumberControlRenderer.vue index 3074dcd0..8aed3b4e 100644 --- a/vue2-vuetify/src/controls/NumberControlRenderer.vue +++ b/vue2-vuetify/src/controls/NumberControlRenderer.vue @@ -24,7 +24,7 @@ v-bind="vuetifyProps('v-text-field', { type: 'number' })" @input="onInputChange" @focus="isFocused = true" - @blur="onBlur" + @blur="isFocused = false; onBlur()" > @@ -101,7 +101,6 @@ const controlRenderer = defineComponent({ this.onChange(result); }, onBlur() : void { - isFocused = false this.inputValue = Number(this.inputValue).toString(); } toNumberOrString(value: string): number | string {