diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte index 48215dc2f9..48476bfbb4 100644 --- a/packages/client/src/components/app/forms/RelationshipField.svelte +++ b/packages/client/src/components/app/forms/RelationshipField.svelte @@ -48,8 +48,11 @@ let optionsObj = {} let initialValuesProcessed + $: { if (!initialValuesProcessed && primaryDisplay) { + // Persist the initial values as options, allowing them to be present in the dropdown, + // even if they are not in the inital fetch results initialValuesProcessed = true optionsObj = { ...optionsObj, @@ -63,19 +66,22 @@ } } } - $: optionsObj = { - ...optionsObj, - ...($fetch.rows || [])?.reduce((accumulator, row) => { - accumulator[row._id] = row - return accumulator - }, {}), - } - $: options = Object.values(optionsObj) + $: enrichedOptions = enrichOptions(optionsObj, $fetch.rows) + const enrichOptions = (optionsObj, fetchResults) => { + const result = { + ...optionsObj, + ...(fetchResults || [])?.reduce((accumulator, row) => { + accumulator[row._id] = row + return accumulator + }, {}), + } + return Object.values(result) + } $: { // We don't want to reorder while the dropdown is open, to avoid UX jumps if (!open) { - options = options.sort((a, b) => { + enrichedOptions = enrichedOptions.sort((a, b) => { const selectedValues = flatten(fieldState?.value) || [] const aIsSelected = selectedValues.find(v => v === a._id) @@ -166,7 +172,7 @@ {#if fieldState}