From b13efb61ef3fd02a828aeb014ec5e810315175df Mon Sep 17 00:00:00 2001
From: Jay Bharadia <93135924+jay-p-b-7span@users.noreply.github.com>
Date: Mon, 23 Jan 2023 23:35:25 +0530
Subject: [PATCH] Fix field configuration view not updating when navigating
 between different fields in New Field drawer (#17254)

* Fix field configuration view not updating when navigating between different fields in New Field drawer

* Used Vue toRef instead of computed as per the feedback

* Make type reactive too

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/composables/use-extension.ts                     | 9 +++------
 .../data-model/field-detail/shared/extension-options.vue | 5 +++--
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/src/composables/use-extension.ts b/app/src/composables/use-extension.ts
index 1cb22851de..758ef57c5f 100644
--- a/app/src/composables/use-extension.ts
+++ b/app/src/composables/use-extension.ts
@@ -4,16 +4,13 @@ import { useExtensions } from '@/extensions';
 import { pluralize } from '@directus/shared/utils';
 
 export function useExtension<T extends AppExtensionType | HybridExtensionType>(
-	type: T,
+	type: T | Ref<T>,
 	name: string | Ref<string | null>
 ): Ref<AppExtensionConfigs[Plural<T>][number] | null> {
 	const extensions = useExtensions();
 
 	return computed(() => {
-		const nameRaw = unref(name);
-
-		if (nameRaw === null) return null;
-
-		return (extensions[pluralize(type)].value as any[]).find(({ id }) => id === nameRaw) ?? null;
+		if (unref(name) === null) return null;
+		return (extensions[pluralize(unref(type))].value as any[]).find(({ id }) => id === unref(name)) ?? null;
 	});
 }
diff --git a/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue b/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue
index 6fa57e3343..d58c67f6d0 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed } from 'vue';
+import { defineComponent, PropType, computed, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useFieldDetailStore } from '../store';
 import { storeToRefs } from 'pinia';
@@ -69,8 +69,9 @@ export default defineComponent({
 		const fieldDetailStore = useFieldDetailStore();
 
 		const { collection, field } = storeToRefs(fieldDetailStore);
+		const { extension, type } = toRefs(props);
 
-		const extensionInfo = useExtension(props.type, props.extension);
+		const extensionInfo = useExtension(type, extension);
 
 		const usesCustomComponent = computed(() => {
 			if (!extensionInfo.value) return false;