From ad6d03c2d0722fcbf6f34c39d87f209bf68f0a66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Pardou?=
 <571533+jrmi@users.noreply.github.com>
Date: Thu, 20 Nov 2025 16:27:05 +0100
Subject: [PATCH] Fix form default value at first render (#4274)

* Fix form data initialisation during SSR

* Fix missing automation error
---
 ...sing_form_data_after_first_render_ssr.json |   9 +
 .../components/elements/FileInputElement.vue  |   8 +-
 .../elements/FileInputElementForm.vue         |   8 +-
 .../automation/pages/automationWorkflow.vue   |  16 +-
 .../elements/components/CheckboxElement.vue   |  20 +-
 .../elements/components/ChoiceElement.vue     |  77 +-------
 .../components/DateTimePickerElement.vue      |  37 +---
 .../elements/components/InputTextElement.vue  |  29 +--
 .../elements/components/RatingElement.vue     |   4 +-
 .../components/RatingInputElement.vue         |  20 +-
 .../components/RecordSelectorElement.vue      |  22 +--
 web-frontend/modules/builder/elementTypes.js  | 181 +++++++++---------
 .../modules/builder/mixins/formElement.js     |  30 +--
 13 files changed, 149 insertions(+), 312 deletions(-)
 create mode 100644 changelog/entries/unreleased/refactor/4268_fix_missing_form_data_after_first_render_ssr.json

diff --git a/changelog/entries/unreleased/refactor/4268_fix_missing_form_data_after_first_render_ssr.json b/changelog/entries/unreleased/refactor/4268_fix_missing_form_data_after_first_render_ssr.json
new file mode 100644
index 0000000000..9fb9d1dbbc
--- /dev/null
+++ b/changelog/entries/unreleased/refactor/4268_fix_missing_form_data_after_first_render_ssr.json
@@ -0,0 +1,9 @@
+{
+    "type": "refactor",
+    "message": "Fix missing form data after first render (SSR)",
+    "issue_origin": "github",
+    "issue_number": 4268,
+    "domain": "builder",
+    "bullet_points": [],
+    "created_at": "2025-11-17"
+}
\ No newline at end of file
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/FileInputElement.vue b/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/FileInputElement.vue
index a87f942b23..716a575ff7 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/FileInputElement.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/FileInputElement.vue
@@ -62,12 +62,6 @@ export default {
     resolvedLabel() {
       return ensureString(this.resolveFormula(this.element.label))
     },
-    resolvedDefaultValue() {
-      return this.elementType.getInitialFormDataValue(
-        this.element,
-        this.applicationContext
-      )
-    },
     allowedExtensions() {
       return this.element.allowed_filetypes
         .filter((v) => v)
@@ -121,6 +115,8 @@ export default {
     },
   },
   watch: {
+    // override the default mixin method because we want to use the one with metadata
+    resolvedDefaultValue() {},
     resolvedDefaultValueWithMetadata: {
       handler(value) {
         if (process.client) {
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/FileInputElementForm.vue b/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/FileInputElementForm.vue
index 5592549ab2..e698ec53e7 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/FileInputElementForm.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/FileInputElementForm.vue
@@ -171,10 +171,10 @@ export default {
   data() {
     return {
       values: {
-        label: '',
-        default_name: '',
-        default_url: '',
-        help_text: '',
+        label: {},
+        default_name: {},
+        default_url: {},
+        help_text: {},
         required: false,
         multiple: false,
         max_filesize: 5,
diff --git a/web-frontend/modules/automation/pages/automationWorkflow.vue b/web-frontend/modules/automation/pages/automationWorkflow.vue
index 5bfe8eec1a..dc6e2f57f8 100644
--- a/web-frontend/modules/automation/pages/automationWorkflow.vue
+++ b/web-frontend/modules/automation/pages/automationWorkflow.vue
@@ -48,6 +48,7 @@ import WorkflowEditor from '@baserow/modules/automation/components/workflow/Work
 import EditorSidePanels from '@baserow/modules/automation/components/workflow/EditorSidePanels'
 import { AutomationApplicationType } from '@baserow/modules/automation/applicationTypes'
 import { notifyIf } from '@baserow/modules/core/utils/error'
+import { StoreItemLookupError } from '@baserow/modules/core/errors'
 
 export default {
   name: 'AutomationWorkflow',
@@ -227,11 +228,12 @@ export default {
         parseInt(from.params.automationId)
       )
       if (automation) {
-        const workflow = this.$store.getters['automationWorkflow/getById'](
-          automation,
-          parseInt(from.params.workflowId)
-        )
-        if (workflow) {
+        try {
+          const workflow = this.$store.getters['automationWorkflow/getById'](
+            automation,
+            parseInt(from.params.workflowId)
+          )
+
           this.$store.dispatch('automationWorkflowNode/select', {
             workflow,
             node: null,
@@ -240,6 +242,10 @@ export default {
             application: automation,
             data: { _loadedOnce: false },
           })
+        } catch (e) {
+          if (!(e instanceof StoreItemLookupError)) {
+            throw e
+          }
         }
       }
       next()
diff --git a/web-frontend/modules/builder/components/elements/components/CheckboxElement.vue b/web-frontend/modules/builder/components/elements/components/CheckboxElement.vue
index 733f2b4e88..5bb49e300b 100644
--- a/web-frontend/modules/builder/components/elements/components/CheckboxElement.vue
+++ b/web-frontend/modules/builder/components/elements/components/CheckboxElement.vue
@@ -20,33 +20,15 @@
 
 <script>
 import formElement from '@baserow/modules/builder/mixins/formElement'
-import {
-  ensureBoolean,
-  ensureString,
-} from '@baserow/modules/core/utils/validator'
+import { ensureString } from '@baserow/modules/core/utils/validator'
 
 export default {
   name: 'CheckboxElement',
   mixins: [formElement],
   computed: {
-    defaultValueResolved() {
-      try {
-        return ensureBoolean(this.resolveFormula(this.element.default_value))
-      } catch {
-        return false
-      }
-    },
     resolvedLabel() {
       return ensureString(this.resolveFormula(this.element.label))
     },
   },
-  watch: {
-    defaultValueResolved: {
-      handler(newValue) {
-        this.inputValue = newValue
-      },
-      immediate: true,
-    },
-  },
 }
 </script>
diff --git a/web-frontend/modules/builder/components/elements/components/ChoiceElement.vue b/web-frontend/modules/builder/components/elements/components/ChoiceElement.vue
index 9f4917dad3..85d4bc2cc4 100644
--- a/web-frontend/modules/builder/components/elements/components/ChoiceElement.vue
+++ b/web-frontend/modules/builder/components/elements/components/ChoiceElement.vue
@@ -57,13 +57,7 @@
 
 <script>
 import formElement from '@baserow/modules/builder/mixins/formElement'
-import {
-  ensureString,
-  ensureStringOrInteger,
-  ensureArray,
-  ensurePositiveInteger,
-} from '@baserow/modules/core/utils/validator'
-import { CHOICE_OPTION_TYPES } from '@baserow/modules/builder/enums'
+import { ensureString } from '@baserow/modules/core/utils/validator'
 
 export default {
   name: 'ChoiceElement',
@@ -94,78 +88,19 @@ export default {
     placeholderResolved() {
       return ensureString(this.resolveFormula(this.element.placeholder))
     },
-    defaultValueResolved() {
-      let converter = ensureString
-      if (
-        this.optionsResolved.find(
-          ({ value }) => value !== undefined && value !== null // We skip null values
-        ) &&
-        Number.isInteger(this.optionsResolved[0].value)
-      ) {
-        converter = (v) => ensurePositiveInteger(v, { allowNull: true })
-      }
-      if (this.element.multiple) {
-        try {
-          const existingValues = this.optionsResolved.map(({ value }) => value)
-          return ensureArray(this.resolveFormula(this.element.default_value))
-            .map(converter)
-            .filter((value) => existingValues.includes(value))
-        } catch {
-          return []
-        }
-      } else {
-        try {
-          // Always return a string if we have a default value, otherwise
-          // set the value to null as single select fields will only skip
-          // field preparation if the value is null.
-          const resolvedSingleValue = converter(
-            this.resolveFormula(this.element.default_value)
-          )
-          return resolvedSingleValue === '' ? null : resolvedSingleValue
-        } catch {
-          return null
-        }
-      }
-    },
     canHaveOptions() {
       return !this.elementIsInError
     },
     optionsResolved() {
-      switch (this.element.option_type) {
-        case CHOICE_OPTION_TYPES.MANUAL:
-          return this.element.options.map(({ name, value }) => ({
-            name,
-            value: value === null ? name : value,
-          }))
-        case CHOICE_OPTION_TYPES.FORMULAS: {
-          const formulaValues = ensureArray(
-            this.resolveFormula(this.element.formula_value)
-          )
-          const formulaNames = ensureArray(
-            this.resolveFormula(this.element.formula_name)
-          )
-          return formulaValues.map((value, index) => ({
-            id: index,
-            value: ensureStringOrInteger(value),
-            name: ensureString(
-              index < formulaValues.length ? formulaNames[index] : value
-            ),
-          }))
-        }
-        default:
-          return []
-      }
+      return this.elementType.getOptionsResolved(
+        this.element,
+        this.applicationContext
+      )
     },
   },
   watch: {
-    defaultValueResolved: {
-      handler(newValue) {
-        this.inputValue = newValue
-      },
-      immediate: true,
-    },
     'element.multiple'() {
-      this.setFormData(this.defaultValueResolved)
+      this.setFormData(this.resolvedDefaultValue)
     },
   },
   methods: {
diff --git a/web-frontend/modules/builder/components/elements/components/DateTimePickerElement.vue b/web-frontend/modules/builder/components/elements/components/DateTimePickerElement.vue
index 21f4506b72..4e8afe8a86 100644
--- a/web-frontend/modules/builder/components/elements/components/DateTimePickerElement.vue
+++ b/web-frontend/modules/builder/components/elements/components/DateTimePickerElement.vue
@@ -21,11 +21,7 @@
 import formElement from '@baserow/modules/builder/mixins/formElement'
 import ABDateTimePicker from '@baserow/modules/builder/components/elements/baseComponents/ABDateTimePicker.vue'
 import { DATE_FORMATS, TIME_FORMATS } from '@baserow/modules/builder/enums'
-import {
-  ensureDateTime,
-  ensureDate,
-  ensureString,
-} from '@baserow/modules/core/utils/validator'
+import { ensureString } from '@baserow/modules/core/utils/validator'
 
 export default {
   name: 'DateTimePickerElement',
@@ -52,41 +48,10 @@ export default {
     DATE_FORMATS() {
       return DATE_FORMATS
     },
-    resolvedDefaultValue() {
-      const resolvedFormula = this.resolveFormula(this.element.default_value)
-
-      if (!resolvedFormula) {
-        return null
-      }
-
-      try {
-        const result = this.element.include_time
-          ? ensureDateTime(resolvedFormula)
-          : ensureDate(resolvedFormula)
-
-        if (result && !isNaN(result)) {
-          // We convert to an iso string here because date objects are not serialized
-          // properly during SSR
-          return result.toJSON()
-        } else {
-          return result
-        }
-      } catch (e) {
-        return null
-      }
-    },
     resolvedLabel() {
       return ensureString(this.resolveFormula(this.element.label))
     },
   },
-  watch: {
-    resolvedDefaultValue: {
-      handler(value) {
-        this.setFormData(value)
-      },
-      immediate: true,
-    },
-  },
   methods: {
     getErrorMessage() {
       if (this.inputValue) {
diff --git a/web-frontend/modules/builder/components/elements/components/InputTextElement.vue b/web-frontend/modules/builder/components/elements/components/InputTextElement.vue
index 75872af450..b74ad224e6 100644
--- a/web-frontend/modules/builder/components/elements/components/InputTextElement.vue
+++ b/web-frontend/modules/builder/components/elements/components/InputTextElement.vue
@@ -60,17 +60,6 @@ export default {
     localeLanguage() {
       return this.$i18n.locale
     },
-    resolvedDefaultValue() {
-      try {
-        const value = this.resolveFormula(this.element.default_value)
-
-        return this.isNumericField
-          ? ensureNumeric(value, { allowNull: true })
-          : ensureString(value)
-      } catch {
-        return null
-      }
-    },
     isNumericField() {
       return this.element.validation_type === 'integer'
     },
@@ -82,20 +71,16 @@ export default {
     },
   },
   watch: {
-    resolvedDefaultValue: {
-      handler(value) {
-        this.inputValue = value
-        this.internalValue = this.toInternalValue(value)
+    inputValue: {
+      handler(newValue) {
+        // If the inputValue was updated (after a reset for instance) we want to update
+        // the internal value
+        if (this.fromInternalValue(this.internalValue) !== newValue) {
+          this.internalValue = this.toInternalValue(newValue)
+        }
       },
       immediate: true,
     },
-    inputValue(newValue) {
-      // If the inputValue was updated (after a reset for instance) we want to update
-      // the internal value
-      if (this.fromInternalValue(this.internalValue) !== newValue) {
-        this.internalValue = this.toInternalValue(newValue)
-      }
-    },
   },
   methods: {
     toInternalValue(value) {
diff --git a/web-frontend/modules/builder/components/elements/components/RatingElement.vue b/web-frontend/modules/builder/components/elements/components/RatingElement.vue
index 7c5db815ce..8ce1a90d2b 100644
--- a/web-frontend/modules/builder/components/elements/components/RatingElement.vue
+++ b/web-frontend/modules/builder/components/elements/components/RatingElement.vue
@@ -12,7 +12,7 @@
 
 <script>
 import Rating from '@baserow/modules/database/components/Rating'
-import formElement from '@baserow/modules/builder/mixins/formElement'
+import element from '@baserow/modules/builder/mixins/element'
 import { ensurePositiveInteger } from '@baserow/modules/core/utils/validator'
 
 export default {
@@ -20,7 +20,7 @@ export default {
   components: {
     Rating,
   },
-  mixins: [formElement],
+  mixins: [element],
   computed: {
     resolvedValue() {
       try {
diff --git a/web-frontend/modules/builder/components/elements/components/RatingInputElement.vue b/web-frontend/modules/builder/components/elements/components/RatingInputElement.vue
index 02657f06e1..1a8511f2f5 100644
--- a/web-frontend/modules/builder/components/elements/components/RatingInputElement.vue
+++ b/web-frontend/modules/builder/components/elements/components/RatingInputElement.vue
@@ -18,10 +18,7 @@
 <script>
 import Rating from '@baserow/modules/database/components/Rating'
 import formElement from '@baserow/modules/builder/mixins/formElement'
-import {
-  ensurePositiveInteger,
-  ensureString,
-} from '@baserow/modules/core/utils/validator'
+import { ensureString } from '@baserow/modules/core/utils/validator'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 
@@ -35,13 +32,6 @@ export default {
     return { v$: useVuelidate() }
   },
   computed: {
-    resolvedDefaultValue() {
-      try {
-        return ensurePositiveInteger(this.resolveFormula(this.element.value))
-      } catch {
-        return 0
-      }
-    },
     labelResolved() {
       return ensureString(this.resolveFormula(this.element.label))
     },
@@ -53,14 +43,6 @@ export default {
       }
     },
   },
-  watch: {
-    resolvedDefaultValue: {
-      handler(value) {
-        this.inputValue = value
-      },
-      immediate: true,
-    },
-  },
   validations() {
     return this.rules
   },
diff --git a/web-frontend/modules/builder/components/elements/components/RecordSelectorElement.vue b/web-frontend/modules/builder/components/elements/components/RecordSelectorElement.vue
index bf33765233..6ea98e08ad 100644
--- a/web-frontend/modules/builder/components/elements/components/RecordSelectorElement.vue
+++ b/web-frontend/modules/builder/components/elements/components/RecordSelectorElement.vue
@@ -67,11 +67,7 @@
 
 <script>
 import _ from 'lodash'
-import {
-  ensureArray,
-  ensureInteger,
-  ensureString,
-} from '@baserow/modules/core/utils/validator'
+import { ensureString } from '@baserow/modules/core/utils/validator'
 import formElement from '@baserow/modules/builder/mixins/formElement'
 import collectionElement from '@baserow/modules/builder/mixins/collectionElement'
 import RuntimeFormulaContext from '@baserow/modules/core/runtimeFormulaContext'
@@ -121,22 +117,6 @@ export default {
     resolvedLabel() {
       return ensureString(this.resolveFormula(this.element.label))
     },
-    resolvedDefaultValue() {
-      const resolvedFormula = this.resolveFormula(this.element.default_value)
-      if (this.element.multiple) {
-        try {
-          return ensureArray(resolvedFormula).map(ensureInteger)
-        } catch {
-          return []
-        }
-      } else {
-        try {
-          return ensureInteger(resolvedFormula)
-        } catch {
-          return null
-        }
-      }
-    },
     resolvedPlaceholder() {
       return ensureString(this.resolveFormula(this.element.placeholder))
     },
diff --git a/web-frontend/modules/builder/elementTypes.js b/web-frontend/modules/builder/elementTypes.js
index 9dbdcb7321..22704adfbf 100644
--- a/web-frontend/modules/builder/elementTypes.js
+++ b/web-frontend/modules/builder/elementTypes.js
@@ -99,6 +99,7 @@ import elementImageRepeat from '@baserow/modules/builder/assets/icons/element-re
 import elementImageSimpleContainer from '@baserow/modules/builder/assets/icons/element-simple_container.svg'
 import elementImageTable from '@baserow/modules/builder/assets/icons/element-table.svg'
 import elementImageText from '@baserow/modules/builder/assets/icons/element-text.svg'
+import moment from '@baserow/modules/core/moment'
 
 import _ from 'lodash'
 import { getValueAtPath } from '../core/utils/object'
@@ -1814,25 +1815,41 @@ export class ChoiceElementType extends FormElementType {
   }
 
   /**
-   * Returns the first option for this element.
-   * @param {Object} element the element we want the option for.
-   * @returns the first option value.
+   * Given a Choice Element, return an array of all valid option Values.
+   *
+   * When adding a new Option, the Page Designer can choose to only define the
+   * Name and leave the Value undefined. In that case, the AB will assume the
+   * Value to be the same as the Name. In the backend, the Value is stored as
+   * null while the frontend visually displays the Name in its place.
+   *
+   * This means that an option's Value can sometimes be null. This method
+   * gathers all valid Values. When a Value null, the Name is used instead.
+   * Otherwise, the Value itself is used.
+   *
+   * @param element - The choice form element
+   * @returns {Array} - An array of valid Values
    */
-  _getFirstOptionValue(element, applicationContext) {
+  getOptionsResolved(element, applicationContext) {
     switch (element.option_type) {
       case CHOICE_OPTION_TYPES.MANUAL:
-        return element.options.find(({ value }) => value)
+        return element.options.map(({ name, value }) => ({
+          name,
+          value: value === null ? name : value,
+        }))
       case CHOICE_OPTION_TYPES.FORMULAS: {
         const formulaValues = ensureArray(
-          this.resolveFormula(element.formula_value, {
-            element,
-            ...applicationContext,
-          })
+          this.resolveFormula(element.formula_value, applicationContext)
         )
-        if (formulaValues.length === 0) {
-          return null
-        }
-        return ensureStringOrInteger(formulaValues[0])
+        const formulaNames = ensureArray(
+          this.resolveFormula(element.formula_name, applicationContext)
+        )
+        return formulaValues.map((value, index) => ({
+          id: index,
+          value: ensureStringOrInteger(value),
+          name: ensureString(
+            index < formulaValues.length ? formulaNames[index] : value
+          ),
+        }))
       }
       default:
         return []
@@ -1840,29 +1857,40 @@ export class ChoiceElementType extends FormElementType {
   }
 
   getInitialFormDataValue(element, applicationContext) {
-    try {
-      const firstValue = this._getFirstOptionValue(element, applicationContext)
-      let converter = ensureStringOrInteger
-      if (firstValue ?? Number.isInteger(firstValue)) {
-        converter = (v) => ensurePositiveInteger(v, { allowNull: true })
-      }
-      if (element.multiple) {
+    let converter = ensureString
+    const optionsResolved = this.getOptionsResolved(element, applicationContext)
+
+    const firstOption = optionsResolved.find(
+      ({ value }) => value !== undefined && value !== null // We skip null values
+    )
+
+    if (firstOption && Number.isInteger(firstOption.value)) {
+      converter = (v) => ensurePositiveInteger(v, { allowNull: true })
+    }
+
+    if (element.multiple) {
+      try {
+        const existingValues = optionsResolved.map(({ value }) => value)
         return ensureArray(
-          this.resolveFormula(element.default_value, {
-            element,
-            ...applicationContext,
-          })
-        ).map(converter)
-      } else {
-        return converter(
-          this.resolveFormula(element.default_value, {
-            element,
-            ...applicationContext,
-          })
+          this.resolveFormula(element.default_value, applicationContext)
         )
+          .map(converter)
+          .filter((value) => existingValues.includes(value))
+      } catch {
+        return []
+      }
+    } else {
+      try {
+        // Always return a string if we have a default value, otherwise
+        // set the value to null as single select fields will only skip
+        // field preparation if the value is null.
+        const resolvedSingleValue = converter(
+          this.resolveFormula(element.default_value, applicationContext)
+        )
+        return resolvedSingleValue === '' ? null : resolvedSingleValue
+      } catch {
+        return null
       }
-    } catch {
-      return element.multiple ? [] : null
     }
   }
 
@@ -1874,27 +1902,6 @@ export class ChoiceElementType extends FormElementType {
     return resolvedName || this.name
   }
 
-  /**
-   * Given a Choice Element, return an array of all valid option Values.
-   *
-   * When adding a new Option, the Page Designer can choose to only define the
-   * Name and leave the Value undefined. In that case, the AB will assume the
-   * Value to be the same as the Name. In the backend, the Value is stored as
-   * null while the frontend visually displays the Name in its place.
-   *
-   * This means that an option's Value can sometimes be null. This method
-   * gathers all valid Values. When a Value null, the Name is used instead.
-   * Otherwise, the Value itself is used.
-   *
-   * @param element - The choice form element
-   * @returns {Array} - An array of valid Values
-   */
-  choiceOptions(element) {
-    return element.options.map((option) => {
-      return option.value !== null ? option.value : option.name
-    })
-  }
-
   /**
    * Responsible for validating the choice form element. It behaves slightly
    * differently so that choice options with blank values are valid. We simply
@@ -1905,26 +1912,14 @@ export class ChoiceElementType extends FormElementType {
    * @returns {boolean}
    */
   isValid(element, value, applicationContext) {
-    let options
-
-    if (element.option_type === CHOICE_OPTION_TYPES.FORMULAS) {
-      try {
-        options = ensureArray(
-          this.resolveFormula(element.formula_value, {
-            element,
-            ...applicationContext,
-          })
-        ).map(ensureStringOrInteger)
-      } catch {
-        options = []
-      }
-    } else {
-      options = this.choiceOptions(element)
-    }
+    const optionValues = this.getOptionsResolved(
+      element,
+      applicationContext
+    ).map(({ value }) => value)
 
     const validOption = element.multiple
-      ? options.some((option) => value.includes(option))
-      : options.includes(value)
+      ? optionValues.some((option) => value.includes(option))
+      : optionValues.includes(value)
 
     return !(element.required && !validOption)
   }
@@ -2212,13 +2207,23 @@ export class DateTimePickerElementType extends FormElementType {
       ...applicationContext,
     })
 
+    if (!resolvedDefaultValue) {
+      return null
+    }
+
     try {
       // We try to convert it to a date and if it works we return it.
       const result = element.include_time
         ? ensureDateTime(resolvedDefaultValue)
         : ensureDate(resolvedDefaultValue)
 
-      return result
+      if (result && !isNaN(result)) {
+        // We convert to an iso string here because date objects are not serialized
+        // properly during SSR
+        return result.toJSON()
+      } else {
+        return result
+      }
     } catch (e) {
       return null
     }
@@ -2229,6 +2234,15 @@ export class DateTimePickerElementType extends FormElementType {
       return !element.required
     }
 
+    if (typeof value === 'string') {
+      // During SSR the date object becomes a string so we need to check
+      // that as well
+      const date = moment(value)
+      if (date.isValid()) {
+        return true
+      }
+    }
+
     return value instanceof Date && !isNaN(value)
   }
 }
@@ -2483,27 +2497,6 @@ export class RatingElementType extends ElementType {
   get generalFormComponent() {
     return RatingElementForm
   }
-
-  formDataType(element) {
-    return 'number'
-  }
-
-  getInitialFormDataValue(element, applicationContext) {
-    try {
-      return ensurePositiveInteger(
-        this.resolveFormula(element.value, {
-          element,
-          ...applicationContext,
-        })
-      )
-    } catch {
-      return 0
-    }
-  }
-
-  isValid(element, value) {
-    return value >= 0 && value <= element.max_value
-  }
 }
 
 export class MenuElementType extends ElementType {
diff --git a/web-frontend/modules/builder/mixins/formElement.js b/web-frontend/modules/builder/mixins/formElement.js
index 21c9a4f6ce..b0cd199d9a 100644
--- a/web-frontend/modules/builder/mixins/formElement.js
+++ b/web-frontend/modules/builder/mixins/formElement.js
@@ -9,18 +9,14 @@ export default {
       inputValue: null,
     }
   },
-  mounted() {
-    // When a form element is mounted, we want to set the initial value of the form
-    // data in the store, but *only* after we have a fully complete `recordIndexPath`,
-    // otherwise we will create two entries in the form data store: one for just the
-    // elementId, and once the `recordIndexPath` is set, another one with the full path.
-    const initialValue = this.elementType.getInitialFormDataValue(
-      this.element,
-      this.applicationContext
-    )
-    this.setFormData(initialValue)
-  },
   computed: {
+    resolvedDefaultValue() {
+      const init = this.elementType.getInitialFormDataValue(
+        this.element,
+        this.applicationContext
+      )
+      return init
+    },
     uniqueElementId() {
       return this.elementType.uniqueElementId({
         element: this.element,
@@ -124,10 +120,18 @@ export default {
       handler(newValue) {
         this.inputValue = newValue
       },
+    },
+    resolvedDefaultValue: {
+      handler(newValue) {
+        this.inputValue = newValue
+      },
       immediate: true,
     },
-    inputValue(newValue) {
-      this.handleFormElementChange(newValue)
+    inputValue: {
+      handler(newValue) {
+        this.handleFormElementChange(newValue)
+      },
+      immediate: true,
     },
   },
 }