From 5534736baef5ea584d2e1e4aef3e277e13cdc700 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Apr 2022 10:35:47 -0400
Subject: [PATCH] Fix default display template lookup in m2o interface (#13012)

Fixes #11825
---
 .../select-dropdown-m2o.vue                   | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue b/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
index c4f732bbed..6638937898 100644
--- a/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
+++ b/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
@@ -64,19 +64,18 @@
 </template>
 
 <script setup lang="ts">
-import { useRelationM2O, useRelationSingle, RelationQuerySingle } from '@/composables/use-relation';
+import { RelationQuerySingle, useRelationM2O, useRelationSingle } from '@/composables/use-relation';
+import { usePermissionsStore, useCollectionsStore } from '@/stores';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
-import { useCollection } from '@directus/shared/composables';
+import { parseFilter } from '@/utils/parse-filter';
+import DrawerCollection from '@/views/private/components/drawer-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
 import { Filter } from '@directus/shared/types';
 import { deepMap, getFieldsFromTemplate } from '@directus/shared/utils';
 import { get } from 'lodash';
+import { render } from 'micromustache';
 import { computed, inject, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import DrawerItem from '@/views/private/components/drawer-item';
-import DrawerCollection from '@/views/private/components/drawer-collection';
-import { parseFilter } from '@/utils/parse-filter';
-import { render } from 'micromustache';
-import { usePermissionsStore } from '@/stores';
 
 const props = withDefaults(
 	defineProps<{
@@ -101,6 +100,8 @@ const emit = defineEmits(['input']);
 
 const values = inject('values', ref<Record<string, any>>({}));
 
+const collectionsStore = useCollectionsStore();
+
 const customFilter = computed(() => {
 	return parseFilter(
 		deepMap(props.filter, (val: any) => {
@@ -126,13 +127,15 @@ const value = computed({
 const selectModalActive = ref(false);
 const editModalActive = ref(false);
 
-const { info: collectionInfo } = useCollection(collection);
-
 const displayTemplate = computed(() => {
 	if (props.template) return props.template;
-	return (
-		collectionInfo.value?.meta?.display_template || `{{ ${relationInfo.value?.relatedPrimaryKeyField.field || ''} }}`
-	);
+
+	if (!relationInfo.value) return '';
+
+	const displayTemplate = collectionsStore.getCollection(relationInfo.value.relatedCollection.collection)?.meta
+		?.display_template;
+
+	return displayTemplate || `{{ ${relationInfo.value.relatedPrimaryKeyField.field || ''} }}`;
 });
 
 const requiredFields = computed(() => {