From 56ef14f82a4a1fdaf435168d4cc627896901c4e2 Mon Sep 17 00:00:00 2001
From: Pascal Jufer <pascal-jufer@bluewin.ch>
Date: Mon, 15 May 2023 22:34:31 +0200
Subject: [PATCH] Default to null in forms if interface itself has no default
 value (#18610)

* Default to null in forms if interface itself has no default value

* Remove unecessary default values

* Create nervous-humans-leave.md
---
 .changeset/nervous-humans-leave.md            |  5 ++++
 .../v-form/form-field-interface.vue           | 25 ++++++-------------
 2 files changed, 13 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/nervous-humans-leave.md

diff --git a/.changeset/nervous-humans-leave.md b/.changeset/nervous-humans-leave.md
new file mode 100644
index 0000000000..b5cdb9e224
--- /dev/null
+++ b/.changeset/nervous-humans-leave.md
@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Fixed issue with interface forms not rendering when interface itself has no default value
diff --git a/app/src/components/v-form/form-field-interface.vue b/app/src/components/v-form/form-field-interface.vue
index 6f2466c61d..05d5ff3e72 100644
--- a/app/src/components/v-form/form-field-interface.vue
+++ b/app/src/components/v-form/form-field-interface.vue
@@ -14,7 +14,7 @@
 				:autofocus="disabled !== true && autofocus"
 				:disabled="disabled"
 				:loading="loading"
-				:value="modelValue === undefined ? field.schema?.default_value : modelValue"
+				:value="value"
 				:width="(field.meta && field.meta.width) || 'full'"
 				:type="field.type"
 				:collection="field.collection"
@@ -34,7 +34,7 @@
 
 		<interface-system-raw-editor
 			v-else-if="rawEditorEnabled && rawEditorActive"
-			:value="modelValue === undefined ? field.schema?.default_value : modelValue"
+			:value="value"
 			:type="field.type"
 			@input="$emit('update:modelValue', $event)"
 		/>
@@ -52,7 +52,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { FormField } from './types';
 
-interface Props {
+const props = defineProps<{
 	field: FormField;
 	batchMode?: boolean;
 	batchActive?: boolean;
@@ -64,20 +64,7 @@ interface Props {
 	rawEditorEnabled?: boolean;
 	rawEditorActive?: boolean;
 	direction?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	batchMode: false,
-	batchActive: false,
-	primaryKey: null,
-	modelValue: undefined,
-	loading: false,
-	disabled: false,
-	autofocus: false,
-	rawEditorEnabled: false,
-	rawEditorActive: false,
-	direction: undefined,
-});
+}>();
 
 defineEmits(['update:modelValue', 'setFieldValue']);
 
@@ -95,6 +82,10 @@ const componentName = computed(() => {
 		? `interface-${props.field.meta.interface}`
 		: `interface-${getDefaultInterfaceForType(props.field.type!)}`;
 });
+
+const value = computed(() =>
+	props.modelValue === undefined ? props.field.schema?.default_value ?? null : props.modelValue
+);
 </script>
 
 <style lang="scss" scoped>