From 25bf7272ed0765748074273975022132491b720d Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 13 Feb 2025 17:04:58 +0000
Subject: [PATCH 1/8] Broken state, saving progress.

---
 .../app/forms/RelationshipField.svelte        | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 1439902b26..15fc977168 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
   import { FieldType } from "@budibase/types"
   import { fetchData, Utils } from "@budibase/frontend-core"
@@ -7,21 +7,21 @@
 
   const { API } = getContext("sdk")
 
-  export let field
-  export let label
-  export let placeholder
-  export let disabled = false
-  export let readonly = false
-  export let validation
-  export let autocomplete = true
-  export let defaultValue
-  export let onChange
-  export let filter
-  export let datasourceType = "table"
-  export let primaryDisplay
-  export let span
-  export let helpText = null
-  export let type = FieldType.LINK
+  export let field: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let validation: any
+  export let autocomplete: boolean = true
+  export let defaultValue: string | undefined = undefined
+  export let onChange: any
+  export let filter:
+  export let datasourceType: string = "table"
+  export let primaryDisplay: string | undefined = undefined
+  export let span: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let type: FieldType.LINK | FieldType.BB_REFERENCE = FieldType.LINK
 
   let fieldState
   let fieldApi
@@ -54,6 +54,7 @@
   $: primaryDisplay = primaryDisplay || tableDefinition?.primaryDisplay
 
   let optionsObj
+  const debouncedFetchRows = Utils.debounce(fetchRows, 250)
 
   $: {
     if (primaryDisplay && fieldState && !optionsObj) {
@@ -109,7 +110,7 @@
     }
   }
 
-  $: forceFetchRows(filter)
+  $: forceFetchRows(filter, defaultValue)
   $: debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
 
   const forceFetchRows = async () => {
@@ -119,7 +120,7 @@
     selectedValue = []
     debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
   }
-  const fetchRows = async (searchTerm, primaryDisplay, defaultVal) => {
+  async function fetchRows(searchTerm, primaryDisplay, defaultVal) {
     const allRowsFetched =
       $fetch.loaded &&
       !Object.keys($fetch.query?.string || {}).length &&
@@ -132,6 +133,9 @@
     if (defaultVal && !Array.isArray(defaultVal)) {
       defaultVal = defaultVal.split(",")
     }
+
+    const fetchMissing = (missingIds: string[])
+
     if (defaultVal && optionsObj && defaultVal.some(val => !optionsObj[val])) {
       await fetch.update({
         query: { oneOf: { _id: defaultVal } },
@@ -152,7 +156,6 @@
       ],
     })
   }
-  const debouncedFetchRows = Utils.debounce(fetchRows, 250)
 
   const flatten = values => {
     if (!values) {

From 3b34b7ad5a402aab1afa56ee9c0de20c66660cfd Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 14 Feb 2025 13:12:20 +0000
Subject: [PATCH 2/8] Some Typescript conversion.

---
 .../bbui/src/Form/Core/Multiselect.svelte     |  2 +-
 .../src/components/app/Placeholder.svelte     |  2 +-
 .../src/components/app/forms/Field.svelte     | 39 ++++-----
 .../src/components/app/forms/InnerForm.svelte | 10 +--
 .../app/forms/RelationshipField.svelte        | 79 ++++++++++---------
 5 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 4873430fa0..26951c526f 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -14,7 +14,7 @@
   export let sort = false
   export let autoWidth = false
   export let searchTerm = null
-  export let customPopoverHeight
+  export let customPopoverHeight = undefined
   export let open = false
   export let loading
   export let onOptionMouseenter = () => {}
diff --git a/packages/client/src/components/app/Placeholder.svelte b/packages/client/src/components/app/Placeholder.svelte
index 54553cb934..4ca62db99b 100644
--- a/packages/client/src/components/app/Placeholder.svelte
+++ b/packages/client/src/components/app/Placeholder.svelte
@@ -5,7 +5,7 @@
   const component = getContext("component")
   const block = getContext("block")
 
-  export let text
+  export let text = undefined
 </script>
 
 {#if $builderStore.inBuilder}
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 5fccb5d881..7bb17da3f7 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { getContext, onDestroy } from "svelte"
   import { writable } from "svelte/store"
   import { Icon } from "@budibase/bbui"
@@ -6,33 +6,33 @@
   import Placeholder from "../Placeholder.svelte"
   import InnerForm from "./InnerForm.svelte"
 
-  export let label
-  export let field
-  export let fieldState
-  export let fieldApi
-  export let fieldSchema
-  export let defaultValue
-  export let type
+  export let label: string | undefined = undefined
+  export let field: string | undefined = undefined
+  export let fieldState: any
+  export let fieldApi: any
+  export let fieldSchema: any
+  export let defaultValue: string | undefined = undefined
+  export let type: any
   export let disabled = false
   export let readonly = false
-  export let validation
+  export let validation: any
   export let span = 6
-  export let helpText = null
+  export let helpText: string | undefined = undefined
 
   // Get contexts
-  const formContext = getContext("form")
-  const formStepContext = getContext("form-step")
-  const fieldGroupContext = getContext("field-group")
+  const formContext: any = getContext("form")
+  const formStepContext: any = getContext("form-step")
+  const fieldGroupContext: any = getContext("field-group")
   const { styleable, builderStore, Provider } = getContext("sdk")
-  const component = getContext("component")
+  const component: any = getContext("component")
 
   // Register field with form
   const formApi = formContext?.formApi
   const labelPos = fieldGroupContext?.labelPosition || "above"
 
-  let formField
+  let formField: any
   let touched = false
-  let labelNode
+  let labelNode: any
 
   // Memoize values required to register the field to avoid loops
   const formStep = formStepContext || writable(1)
@@ -65,7 +65,7 @@
   $: $component.editing && labelNode?.focus()
 
   // Update form properties in parent component on every store change
-  $: unsubscribe = formField?.subscribe(value => {
+  $: unsubscribe = formField?.subscribe((value: any) => {
     fieldState = value?.fieldState
     fieldApi = value?.fieldApi
     fieldSchema = value?.fieldSchema
@@ -74,7 +74,7 @@
   // Determine label class from position
   $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
 
-  const registerField = info => {
+  const registerField = (info: any) => {
     formField = formApi?.registerField(
       info.field,
       info.type,
@@ -86,8 +86,9 @@
     )
   }
 
-  const updateLabel = e => {
+  const updateLabel = (e: any) => {
     if (touched) {
+      // @ts-expect-error updateProp doesn't appear to exist, needs investigation
       builderStore.actions.updateProp("label", e.target.textContent)
     }
     touched = false
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index fcf5379713..5d0811eedb 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -4,13 +4,13 @@
   import { createValidatorFromConstraints } from "./validation"
   import { Helpers } from "@budibase/bbui"
 
-  export let dataSource
+  export let dataSource  = undefined
   export let disabled = false
   export let readonly = false
-  export let initialValues
-  export let size
-  export let schema
-  export let definition
+  export let initialValues = undefined
+  export let size = undefined
+  export let schema  = undefined
+  export let definition = undefined
   export let disableSchemaValidation = false
   export let editAutoColumns = false
 
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 15fc977168..8a47ae1604 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -4,36 +4,43 @@
   import { fetchData, Utils } from "@budibase/frontend-core"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
+  import type { SearchFilter, RelationshipFieldMetadata, Table, Row } from "@budibase/types"
 
   const { API } = getContext("sdk")
 
   export let field: string | undefined = undefined
   export let label: string | undefined = undefined
-  export let placeholder: string | undefined = undefined
+  export let placeholder: any = undefined
   export let disabled: boolean = false
   export let readonly: boolean = false
   export let validation: any
   export let autocomplete: boolean = true
   export let defaultValue: string | undefined = undefined
   export let onChange: any
-  export let filter:
-  export let datasourceType: string = "table"
+  export let filter: SearchFilter[]
+  // not really obvious how to type this - some components pass other things here
+  // but it looks like the component data fetch should only work with tables
+  export let datasourceType: "table" = "table"
   export let primaryDisplay: string | undefined = undefined
-  export let span: string | undefined = undefined
+  export let span: number | undefined = undefined
   export let helpText: string | undefined = undefined
-  export let type: FieldType.LINK | FieldType.BB_REFERENCE = FieldType.LINK
+  export let type: FieldType.LINK | FieldType.BB_REFERENCE | FieldType.BB_REFERENCE_SINGLE = FieldType.LINK
 
-  let fieldState
-  let fieldApi
-  let fieldSchema
-  let tableDefinition
-  let searchTerm
-  let open
+  type RelationshipValue = { _id: string; [key: string]: any }
+  type OptionObj = Record<string, RelationshipValue>
+  type OptionsObjType = Record<string, OptionObj>
+
+  let fieldState: any
+  let fieldApi: any
+  let fieldSchema: RelationshipFieldMetadata | undefined
+  let tableDefinition: Table | null | undefined
+  let searchTerm: any
+  let open: boolean
 
   $: multiselect =
     [FieldType.LINK, FieldType.BB_REFERENCE].includes(type) &&
     fieldSchema?.relationshipType !== "one-to-many"
-  $: linkedTableId = fieldSchema?.tableId
+  $: linkedTableId = fieldSchema?.tableId!
   $: fetch = fetchData({
     API,
     datasource: {
@@ -53,7 +60,7 @@
   $: component = multiselect ? CoreMultiselect : CoreSelect
   $: primaryDisplay = primaryDisplay || tableDefinition?.primaryDisplay
 
-  let optionsObj
+  let optionsObj: OptionsObjType = {}
   const debouncedFetchRows = Utils.debounce(fetchRows, 250)
 
   $: {
@@ -64,7 +71,7 @@
       if (!Array.isArray(valueAsSafeArray)) {
         valueAsSafeArray = [fieldState.value]
       }
-      optionsObj = valueAsSafeArray.reduce((accumulator, value) => {
+      optionsObj = valueAsSafeArray.reduce((accumulator: OptionObj, value: { _id: string, primaryDisplay: any }) => {
         // fieldState has to be an array of strings to be valid for an update
         // therefore we cannot guarantee value will be an object
         // https://linear.app/budibase/issue/BUDI-7577/refactor-the-relationshipfield-component-to-have-better-support-for
@@ -81,10 +88,10 @@
   }
 
   $: enrichedOptions = enrichOptions(optionsObj, $fetch.rows)
-  const enrichOptions = (optionsObj, fetchResults) => {
+  const enrichOptions = (optionsObj: OptionsObjType, fetchResults: Row[]) => {
     const result = (fetchResults || [])?.reduce((accumulator, row) => {
-      if (!accumulator[row._id]) {
-        accumulator[row._id] = row
+      if (!accumulator[row._id!]) {
+        accumulator[row._id!] = row
       }
       return accumulator
     }, optionsObj || {})
@@ -93,24 +100,24 @@
   }
   $: {
     // We don't want to reorder while the dropdown is open, to avoid UX jumps
-    if (!open) {
-      enrichedOptions = enrichedOptions.sort((a, b) => {
+    if (!open && primaryDisplay) {
+      enrichedOptions = enrichedOptions.sort((a: OptionObj, b: OptionObj) => {
         const selectedValues = flatten(fieldState?.value) || []
 
-        const aIsSelected = selectedValues.find(v => v === a._id)
-        const bIsSelected = selectedValues.find(v => v === b._id)
+        const aIsSelected = selectedValues.find((v: RelationshipValue) => v === a._id)
+        const bIsSelected = selectedValues.find((v: RelationshipValue) => v === b._id)
         if (aIsSelected && !bIsSelected) {
           return -1
         } else if (!aIsSelected && bIsSelected) {
           return 1
         }
 
-        return a[primaryDisplay] > b[primaryDisplay]
+        return (a[primaryDisplay] > b[primaryDisplay]) as unknown as number
       })
     }
   }
 
-  $: forceFetchRows(filter, defaultValue)
+  $: { if (filter || defaultValue) { forceFetchRows() } }
   $: debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
 
   const forceFetchRows = async () => {
@@ -120,7 +127,7 @@
     selectedValue = []
     debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
   }
-  async function fetchRows(searchTerm, primaryDisplay, defaultVal) {
+  async function fetchRows(searchTerm: any, primaryDisplay: string, defaultVal: string | string[]) {
     const allRowsFetched =
       $fetch.loaded &&
       !Object.keys($fetch.query?.string || {}).length &&
@@ -130,20 +137,17 @@
       return
     }
     // must be an array
-    if (defaultVal && !Array.isArray(defaultVal)) {
-      defaultVal = defaultVal.split(",")
-    }
+    const defaultValArray: string[] = !defaultVal ? [] : !Array.isArray(defaultVal) ? defaultVal.split(",") : defaultVal
 
-    const fetchMissing = (missingIds: string[])
-
-    if (defaultVal && optionsObj && defaultVal.some(val => !optionsObj[val])) {
+    if (defaultVal && optionsObj && defaultValArray.some(val => !optionsObj[val])) {
       await fetch.update({
-        query: { oneOf: { _id: defaultVal } },
+        query: { oneOf: { _id: defaultValArray } },
       })
     }
 
     // Ensure we match all filters, rather than any
-    const baseFilter = (filter || []).filter(x => x.operator !== "allOr")
+    // @ts-expect-error this doesn't fit types, but don't want to change it yet
+    const baseFilter: any = (filter || []).filter(x => x.operator !== "allOr")
     await fetch.update({
       filter: [
         ...baseFilter,
@@ -157,7 +161,7 @@
     })
   }
 
-  const flatten = values => {
+  const flatten = (values: any | any[]) => {
     if (!values) {
       return []
     }
@@ -165,17 +169,17 @@
     if (!Array.isArray(values)) {
       values = [values]
     }
-    values = values.map(value =>
+    values = values.map((value: any) =>
       typeof value === "object" ? value._id : value
     )
     return values
   }
 
-  const getDisplayName = row => {
-    return row?.[primaryDisplay] || "-"
+  const getDisplayName = (row: Row) => {
+    return row?.[primaryDisplay!] || "-"
   }
 
-  const handleChange = e => {
+  const handleChange = (e: any) => {
     let value = e.detail
     if (!multiselect) {
       value = value == null ? [] : [value]
@@ -229,7 +233,6 @@
       id={fieldState.fieldId}
       disabled={fieldState.disabled}
       readonly={fieldState.readonly}
-      error={fieldState.error}
       getOptionLabel={getDisplayName}
       getOptionValue={option => option._id}
       {placeholder}

From f04451a2edcfc5cac2c2cde10fa8817cf8d13eea Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 14 Feb 2025 14:25:37 +0000
Subject: [PATCH 3/8] Prettier and fix for bug - if selected is not found,
 fetch it.

---
 .../src/components/app/forms/InnerForm.svelte |  4 +-
 .../app/forms/RelationshipField.svelte        | 91 ++++++++++++++-----
 2 files changed, 72 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index 5d0811eedb..7b09ddaae5 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -4,12 +4,12 @@
   import { createValidatorFromConstraints } from "./validation"
   import { Helpers } from "@budibase/bbui"
 
-  export let dataSource  = undefined
+  export let dataSource = undefined
   export let disabled = false
   export let readonly = false
   export let initialValues = undefined
   export let size = undefined
-  export let schema  = undefined
+  export let schema = undefined
   export let definition = undefined
   export let disableSchemaValidation = false
   export let editAutoColumns = false
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 8a47ae1604..63ca9c38e6 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -4,7 +4,12 @@
   import { fetchData, Utils } from "@budibase/frontend-core"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
-  import type { SearchFilter, RelationshipFieldMetadata, Table, Row } from "@budibase/types"
+  import type {
+    SearchFilter,
+    RelationshipFieldMetadata,
+    Table,
+    Row,
+  } from "@budibase/types"
 
   const { API } = getContext("sdk")
 
@@ -24,7 +29,10 @@
   export let primaryDisplay: string | undefined = undefined
   export let span: number | undefined = undefined
   export let helpText: string | undefined = undefined
-  export let type: FieldType.LINK | FieldType.BB_REFERENCE | FieldType.BB_REFERENCE_SINGLE = FieldType.LINK
+  export let type:
+    | FieldType.LINK
+    | FieldType.BB_REFERENCE
+    | FieldType.BB_REFERENCE_SINGLE = FieldType.LINK
 
   type RelationshipValue = { _id: string; [key: string]: any }
   type OptionObj = Record<string, RelationshipValue>
@@ -36,6 +44,7 @@
   let tableDefinition: Table | null | undefined
   let searchTerm: any
   let open: boolean
+  let selectedValue: string[] | string
 
   $: multiselect =
     [FieldType.LINK, FieldType.BB_REFERENCE].includes(type) &&
@@ -71,19 +80,25 @@
       if (!Array.isArray(valueAsSafeArray)) {
         valueAsSafeArray = [fieldState.value]
       }
-      optionsObj = valueAsSafeArray.reduce((accumulator: OptionObj, value: { _id: string, primaryDisplay: any }) => {
-        // fieldState has to be an array of strings to be valid for an update
-        // therefore we cannot guarantee value will be an object
-        // https://linear.app/budibase/issue/BUDI-7577/refactor-the-relationshipfield-component-to-have-better-support-for
-        if (!value._id) {
+      optionsObj = valueAsSafeArray.reduce(
+        (
+          accumulator: OptionObj,
+          value: { _id: string; primaryDisplay: any }
+        ) => {
+          // fieldState has to be an array of strings to be valid for an update
+          // therefore we cannot guarantee value will be an object
+          // https://linear.app/budibase/issue/BUDI-7577/refactor-the-relationshipfield-component-to-have-better-support-for
+          if (!value._id) {
+            return accumulator
+          }
+          accumulator[value._id] = {
+            _id: value._id,
+            [primaryDisplay]: value.primaryDisplay,
+          }
           return accumulator
-        }
-        accumulator[value._id] = {
-          _id: value._id,
-          [primaryDisplay]: value.primaryDisplay,
-        }
-        return accumulator
-      }, {})
+        },
+        {}
+      )
     }
   }
 
@@ -104,8 +119,12 @@
       enrichedOptions = enrichedOptions.sort((a: OptionObj, b: OptionObj) => {
         const selectedValues = flatten(fieldState?.value) || []
 
-        const aIsSelected = selectedValues.find((v: RelationshipValue) => v === a._id)
-        const bIsSelected = selectedValues.find((v: RelationshipValue) => v === b._id)
+        const aIsSelected = selectedValues.find(
+          (v: RelationshipValue) => v === a._id
+        )
+        const bIsSelected = selectedValues.find(
+          (v: RelationshipValue) => v === b._id
+        )
         if (aIsSelected && !bIsSelected) {
           return -1
         } else if (!aIsSelected && bIsSelected) {
@@ -117,7 +136,11 @@
     }
   }
 
-  $: { if (filter || defaultValue) { forceFetchRows() } }
+  $: {
+    if (filter || defaultValue) {
+      forceFetchRows()
+    }
+  }
   $: debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
 
   const forceFetchRows = async () => {
@@ -127,7 +150,11 @@
     selectedValue = []
     debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
   }
-  async function fetchRows(searchTerm: any, primaryDisplay: string, defaultVal: string | string[]) {
+  async function fetchRows(
+    searchTerm: any,
+    primaryDisplay: string,
+    defaultVal: string | string[]
+  ) {
     const allRowsFetched =
       $fetch.loaded &&
       !Object.keys($fetch.query?.string || {}).length &&
@@ -137,14 +164,32 @@
       return
     }
     // must be an array
-    const defaultValArray: string[] = !defaultVal ? [] : !Array.isArray(defaultVal) ? defaultVal.split(",") : defaultVal
+    const defaultValArray: string[] = !defaultVal
+      ? []
+      : !Array.isArray(defaultVal)
+      ? defaultVal.split(",")
+      : defaultVal
 
-    if (defaultVal && optionsObj && defaultValArray.some(val => !optionsObj[val])) {
+    if (
+      defaultVal &&
+      optionsObj &&
+      defaultValArray.some(val => !optionsObj[val])
+    ) {
       await fetch.update({
         query: { oneOf: { _id: defaultValArray } },
       })
     }
 
+    if (
+      (Array.isArray(selectedValue) &&
+        selectedValue.some(val => !optionsObj[val])) ||
+      (selectedValue && !optionsObj[selectedValue as string])
+    ) {
+      await fetch.update({
+        query: { oneOf: { _id: Array.isArray(selectedValue) ? selectedValue : [selectedValue] }}
+      })
+    }
+
     // Ensure we match all filters, rather than any
     // @ts-expect-error this doesn't fit types, but don't want to change it yet
     const baseFilter: any = (filter || []).filter(x => x.operator !== "allOr")
@@ -206,6 +251,10 @@
       fetch.nextPage()
     }
   }
+
+  const componentValue = () => {
+    return selectedValue as any
+  }
 </script>
 
 <Field
@@ -227,7 +276,7 @@
       this={component}
       options={enrichedOptions}
       {autocomplete}
-      value={selectedValue}
+      value={componentValue()}
       on:change={handleChange}
       on:loadMore={loadMore}
       id={fieldState.fieldId}

From 5dd473119ce724a84a84361aa33dd08ec36d7963 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 14 Feb 2025 14:37:09 +0000
Subject: [PATCH 4/8] Prettier.

---
 .../src/components/app/forms/RelationshipField.svelte       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 63ca9c38e6..8e7ca01e1e 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -186,7 +186,11 @@
       (selectedValue && !optionsObj[selectedValue as string])
     ) {
       await fetch.update({
-        query: { oneOf: { _id: Array.isArray(selectedValue) ? selectedValue : [selectedValue] }}
+        query: {
+          oneOf: {
+            _id: Array.isArray(selectedValue) ? selectedValue : [selectedValue],
+          },
+        },
       })
     }
 

From b6498c9082c8683870e54a378e39b64df10da0ad Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 14 Feb 2025 17:27:42 +0000
Subject: [PATCH 5/8] Prettier.

---
 .../client/src/components/app/forms/RelationshipField.svelte    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 8e7ca01e1e..e3d1baef41 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -46,6 +46,8 @@
   let open: boolean
   let selectedValue: string[] | string
 
+  // need a cast version of this for reactivity, components below aren't typed
+  $: castSelectedValue = selectedValue as any
   $: multiselect =
     [FieldType.LINK, FieldType.BB_REFERENCE].includes(type) &&
     fieldSchema?.relationshipType !== "one-to-many"

From 03461c2a88e06f4dda0b4d6dc1a044fcb69fbea3 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 14 Feb 2025 17:29:30 +0000
Subject: [PATCH 6/8] PR comments.

---
 .../components/app/forms/RelationshipField.svelte    | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index e3d1baef41..51be930556 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -25,7 +25,7 @@
   export let filter: SearchFilter[]
   // not really obvious how to type this - some components pass other things here
   // but it looks like the component data fetch should only work with tables
-  export let datasourceType: "table" = "table"
+  export let datasourceType: "table" | "user" | "groupUser" = "table"
   export let primaryDisplay: string | undefined = undefined
   export let span: number | undefined = undefined
   export let helpText: string | undefined = undefined
@@ -55,7 +55,9 @@
   $: fetch = fetchData({
     API,
     datasource: {
-      type: datasourceType,
+      // typing here doesn't seem correct - we have the correct datasourceType options
+      // but when we configure the fetchData, it seems to think only "table" is valid
+      type: datasourceType as any,
       tableId: linkedTableId,
     },
     options: {
@@ -257,10 +259,6 @@
       fetch.nextPage()
     }
   }
-
-  const componentValue = () => {
-    return selectedValue as any
-  }
 </script>
 
 <Field
@@ -282,7 +280,7 @@
       this={component}
       options={enrichedOptions}
       {autocomplete}
-      value={componentValue()}
+      value={castSelectedValue}
       on:change={handleChange}
       on:loadMore={loadMore}
       id={fieldState.fieldId}

From 3a4563a1180265bde903a33e668e5d912c3f60d3 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 14 Feb 2025 17:29:39 +0000
Subject: [PATCH 7/8] Remove comment.

---
 .../client/src/components/app/forms/RelationshipField.svelte    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 51be930556..54171309de 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -23,8 +23,6 @@
   export let defaultValue: string | undefined = undefined
   export let onChange: any
   export let filter: SearchFilter[]
-  // not really obvious how to type this - some components pass other things here
-  // but it looks like the component data fetch should only work with tables
   export let datasourceType: "table" | "user" | "groupUser" = "table"
   export let primaryDisplay: string | undefined = undefined
   export let span: number | undefined = undefined

From bc66f4b79945d661bc9b23cf56a92f072f3de46b Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 14 Feb 2025 17:30:39 +0000
Subject: [PATCH 8/8] Update comment.

---
 packages/client/src/components/app/forms/Field.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 7bb17da3f7..a5d66538c4 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -88,7 +88,7 @@
 
   const updateLabel = (e: any) => {
     if (touched) {
-      // @ts-expect-error updateProp doesn't appear to exist, needs investigation
+      // @ts-expect-error and TODO updateProp isn't recognised - need builder TS conversion
       builderStore.actions.updateProp("label", e.target.textContent)
     }
     touched = false