diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 479dc33a..4b860b7f 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -339,8 +339,8 @@ export default {
   watch: {
     modelValue () {
       this.$nextTick(() => {
-        if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.modelValue.length)) {
-          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
+        if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.modelValue}`.length)) {
+          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
         }
       })
     }
@@ -348,9 +348,7 @@ export default {
   mounted () {
     this.$nextTick(() => {
       if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer) {
-        this.$nextTick(() => {
-          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
-        })
+        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
       }
     })
   },
diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index c071e499..c1ae274a 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -302,18 +302,16 @@ export default {
   watch: {
     'field.default_value' () {
       this.$nextTick(() => {
-        if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value.length)) {
-          this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
+        if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.field.default_value}`.length)) {
+          this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
         }
       })
     }
   },
   mounted () {
     this.$nextTick(() => {
-      if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value)) {
-        this.$nextTick(() => {
-          this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
-        })
+      if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.field.default_value}`.length)) {
+        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
       }
     })
   },
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 2097072a..fe3acca3 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -116,15 +116,15 @@
               @click="closeDropdown"
             >
               <div
-                v-if="field.type === 'text' && !defaultField"
+                v-if="['text', 'number'].includes(field.type) && !defaultField"
                 class="py-1.5 px-1 relative"
                 @click.stop
               >
                 <input
                   v-model="field.default_value"
-                  type="text"
                   :placeholder="t('default_value')"
                   dir="auto"
+                  :type="field.type"
                   class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
                   @blur="save"
                 >
@@ -258,7 +258,7 @@
                 </label>
               </li>
               <li
-                v-if="field.type === 'text' && !defaultField"
+                v-if="['text', 'number'].includes(field.type) && !defaultField"
                 @click.stop
               >
                 <label class="cursor-pointer py-1.5">