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

@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Fixed issue with interface forms not rendering when interface itself has no default value

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>