Fixes nested groups in accordions not rendering fields (#14369)

* initial fix for nested groups in accordions

* removed debug code

app/src/interfaces/group-accordion/accordion-section.vue

@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue';
-import { merge } from 'lodash';
+import { merge, isNil } from 'lodash';
 import { Field } from '@directus/shared/types';
 import { ValidationError } from '@directus/shared/types';
 import { useI18n } from 'vue-i18n';
@@ -105,9 +105,11 @@ export default defineComponent({
 		const { t } = useI18n();
 
 		const fieldsInSection = computed(() => {
-			return props.fields
-				.filter((field) => field.meta?.group === props.group && field.meta?.id === props.field.meta?.id)
-				.map((field) => merge({}, field, { hideLabel: true }));
+			let fields: Field[] = [merge({}, props.field, { hideLabel: true })];
+			if (props.field.meta?.special?.includes('group')) {
+				fields.push(...getFieldsForGroup(props.field.meta?.field));
+			}
+			return fields;
 		});
 
 		const edited = computed(() => {
@@ -142,6 +144,21 @@ export default defineComponent({
 				toggle();
 			}
 		}
+
+		function getFieldsForGroup(group: null | string, passed: string[] = []): Field[] {
+			const fieldsInGroup: Field[] = props.fields.filter((field) => {
+				return field.meta?.group === group || (group === null && isNil(field.meta));
+			});
+
+			for (const field of fieldsInGroup) {
+				if (field.meta?.special?.includes('group') && !passed.includes(field.meta!.field)) {
+					passed.push(field.meta!.field);
+					fieldsInGroup.push(...getFieldsForGroup(field.meta!.field, passed));
+				}
+			}
+
+			return fieldsInGroup;
+		}
 	},
 });
 </script>

app/src/interfaces/group-accordion/group-accordion.vue

@@ -4,7 +4,7 @@
 			v-for="accordionField in groupFields"
 			:key="accordionField.field"
 			:field="accordionField"
-			:fields="groupFields"
+			:fields="fields"
 			:values="groupValues"
 			:initial-values="initialValues"
 			:disabled="disabled"