diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index c794009767..aa36c44b2d 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -42,7 +42,7 @@ import FieldListItem from '../v-field-template/field-list-item.vue';
 import { useFieldsStore } from '@/stores';
 import { Field } from '@/types/';
 import Draggable from 'vuedraggable';
-import useFieldTree from '@/composables/use-field-tree';
+import useFieldTree, { findTree, filterTree } from '@/composables/use-field-tree';
 import useCollection from '@/composables/use-collection';
 import { FieldTree } from '../v-field-template/types';
 import hideDragImage from '@/utils/hide-drag-image';
@@ -103,36 +103,6 @@ export default defineComponent({
 
 		return { menuActive, addField, removeField, selectableFields, selectedFields, hideDragImage, tree };
 
-		function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
-			if (tree === undefined) return undefined;
-
-			const fieldObject = tree.find((f) => f.field === fieldSections[0]);
-
-			if (fieldObject === undefined) return undefined;
-			if (fieldSections.length === 1) return fieldObject;
-			return findTree(fieldObject.children, fieldSections.slice(1));
-		}
-
-		function filterTree(
-			tree: FieldTree[] | undefined,
-			f: (field: FieldTree, prefix: string) => boolean,
-			prefix = ''
-		) {
-			if (tree === undefined) return undefined;
-
-			const newTree: FieldTree[] = [];
-			tree.forEach((field) => {
-				if (f(field, prefix)) {
-					newTree.push({
-						field: field.field,
-						name: field.name,
-						children: filterTree(field.children, f, prefix + field.field + '.'),
-					});
-				}
-			});
-			return newTree.length === 0 ? undefined : newTree;
-		}
-
 		function removeField(field: string) {
 			_value.value = _value.value.filter((f) => f !== field);
 		}
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 14682da64a..9735850727 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -32,7 +32,7 @@ import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted } from '@vu
 import FieldListItem from './field-list-item.vue';
 import { useFieldsStore } from '@/stores';
 import { Field } from '@/types/';
-import useFieldTree from '@/composables/use-field-tree';
+import useFieldTree, { findTree } from '@/composables/use-field-tree';
 
 export default defineComponent({
 	components: { FieldListItem },
@@ -152,8 +152,10 @@ export default defineComponent({
 		}
 
 		function addField(fieldKey: string) {
+			console.log(fieldKey);
+
 			if (!contentEl.value) return;
-			const field: Field | null = fieldsStore.getField(props.collection, fieldKey);
+			const field = findTree(tree.value, fieldKey.split('.'));
 			if (!field) return;
 
 			const button = document.createElement('button');
@@ -161,6 +163,12 @@ export default defineComponent({
 			button.setAttribute('contenteditable', 'false');
 			button.innerText = String(field.name);
 
+			if (window.getSelection()?.rangeCount == 0) {
+				const range = document.createRange();
+				range.selectNodeContents(contentEl.value.children[0]);
+				window.getSelection()?.addRange(range);
+			}
+
 			const range = window.getSelection()?.getRangeAt(0);
 			if (!range) return;
 			range.deleteContents();
@@ -245,7 +253,7 @@ export default defineComponent({
 							return `<span class="text">${part}</span>`;
 						}
 						const fieldKey = part.replaceAll(/({|})/g, '').trim();
-						const field: Field | null = fieldsStore.getField(props.collection, fieldKey);
+						const field = findTree(tree.value, fieldKey.split('.'));
 
 						if (!field) return '';
 
diff --git a/app/src/composables/use-field-tree/index.ts b/app/src/composables/use-field-tree/index.ts
index 1f1c1de159..7b57a783a2 100644
--- a/app/src/composables/use-field-tree/index.ts
+++ b/app/src/composables/use-field-tree/index.ts
@@ -1,4 +1,4 @@
-import useFieldTree from './use-field-tree';
+import useFieldTree, { filterTree, findTree } from './use-field-tree';
 
 export default useFieldTree;
-export { useFieldTree };
+export { useFieldTree, filterTree, findTree };
diff --git a/app/src/composables/use-field-tree/use-field-tree.ts b/app/src/composables/use-field-tree/use-field-tree.ts
index 6c6c7c79c8..d6711f1ad0 100644
--- a/app/src/composables/use-field-tree/use-field-tree.ts
+++ b/app/src/composables/use-field-tree/use-field-tree.ts
@@ -3,6 +3,36 @@ import { FieldTree } from './types';
 import { useFieldsStore, useRelationsStore } from '@/stores/';
 import { Field, Relation } from '@/types';
 
+export function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
+	if (tree === undefined) return undefined;
+
+	const fieldObject = tree.find((f) => f.field === fieldSections[0]);
+
+	if (fieldObject === undefined) return undefined;
+	if (fieldSections.length === 1) return fieldObject;
+	return findTree(fieldObject.children, fieldSections.slice(1));
+}
+
+export function filterTree(
+	tree: FieldTree[] | undefined,
+	f: (field: FieldTree, prefix: string) => boolean,
+	prefix = ''
+) {
+	if (tree === undefined) return undefined;
+
+	const newTree: FieldTree[] = [];
+	tree.forEach((field) => {
+		if (f(field, prefix)) {
+			newTree.push({
+				field: field.field,
+				name: field.name,
+				children: filterTree(field.children, f, prefix + field.field + '.'),
+			});
+		}
+	});
+	return newTree.length === 0 ? undefined : newTree;
+}
+
 export default function useFieldTree(collection: Ref<string>, showHidden = false) {
 	const fieldsStore = useFieldsStore();
 	const relationsStore = useRelationsStore();
diff --git a/app/src/interfaces/many-to-one/options.vue b/app/src/interfaces/many-to-one/options.vue
index 6da15a6f75..5492673025 100644
--- a/app/src/interfaces/many-to-one/options.vue
+++ b/app/src/interfaces/many-to-one/options.vue
@@ -40,13 +40,13 @@ export default defineComponent({
 			},
 		});
 		const collection = computed(() => {
-			if (props.fieldData.field === null || props.fieldData.meta?.collection === undefined) return null;
-			const relationData: Relation[] = relationsStore.getRelationsForField(
-				props.fieldData.meta?.collection,
-				props.fieldData.field
-			);
+			const collection = props.fieldData.meta?.collection;
+			const field = props.fieldData.field;
 
-			return relationData[0]?.one_collection;
+			if (collection === null || field === undefined) return null;
+			const relationData: Relation[] = relationsStore.getRelationsForField(collection, field);
+
+			return relationData.find((r) => r.many_collection === collection && r.many_field === field)?.one_collection;
 		});
 		return { template, collection };
 	},