From b514136ff7a09bcde7d0b41b791ce91c0affa861 Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Fri, 5 May 2023 15:18:32 +0200
Subject: [PATCH] Only render form field if field is present (#18500)

---
 app/src/components/v-form/v-form.vue | 120 ++++++++++++++-------------
 1 file changed, 61 insertions(+), 59 deletions(-)

diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index bcefd05ac9..af1ab01b39 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -15,70 +15,72 @@
 			{{ t('no_visible_fields_copy') }}
 		</v-info>
 		<template v-for="(fieldName, index) in fieldNames" :key="fieldName">
-			<component
-				:is="`interface-${fieldsMap[fieldName]?.meta?.interface || 'group-standard'}`"
-				v-if="fieldsMap[fieldName]?.meta?.special?.includes('group')"
-				v-show="!fieldsMap[fieldName]?.meta?.hidden"
-				:ref="
+			<template v-if="fieldsMap[fieldName]">
+				<component
+					:is="`interface-${fieldsMap[fieldName]!.meta?.interface || 'group-standard'}`"
+					v-if="fieldsMap[fieldName]!.meta?.special?.includes('group')"
+					v-show="!fieldsMap[fieldName]!.meta?.hidden"
+					:ref="
 					(el: Element) => {
 						formFieldEls[fieldName] = el;
 					}
 				"
-				:class="[
-					fieldsMap[fieldName]?.meta?.width || 'full',
-					index === firstVisibleFieldIndex ? 'first-visible-field' : '',
-				]"
-				:field="fieldsMap[fieldName]"
-				:fields="fieldsForGroup[index] || []"
-				:values="modelValue || {}"
-				:initial-values="initialValues || {}"
-				:disabled="disabled"
-				:batch-mode="batchMode"
-				:batch-active-fields="batchActiveFields"
-				:primary-key="primaryKey"
-				:loading="loading"
-				:validation-errors="validationErrors"
-				:badge="badge"
-				:raw-editor-enabled="rawEditorEnabled"
-				:direction="direction"
-				v-bind="fieldsMap[fieldName]?.meta?.options || {}"
-				@apply="apply"
-			/>
+					:class="[
+						fieldsMap[fieldName]!.meta?.width || 'full',
+						index === firstVisibleFieldIndex ? 'first-visible-field' : '',
+					]"
+					:field="fieldsMap[fieldName]"
+					:fields="fieldsForGroup[index] || []"
+					:values="modelValue || {}"
+					:initial-values="initialValues || {}"
+					:disabled="disabled"
+					:batch-mode="batchMode"
+					:batch-active-fields="batchActiveFields"
+					:primary-key="primaryKey"
+					:loading="loading"
+					:validation-errors="validationErrors"
+					:badge="badge"
+					:raw-editor-enabled="rawEditorEnabled"
+					:direction="direction"
+					v-bind="fieldsMap[fieldName]!.meta?.options || {}"
+					@apply="apply"
+				/>
 
-			<form-field
-				v-else-if="!fieldsMap[fieldName]?.meta?.hidden"
-				:ref="
-					(el) => {
-						formFieldEls[fieldName] = el;
-					}
-				"
-				:class="index === firstVisibleFieldIndex ? 'first-visible-field' : ''"
-				:field="fieldsMap[fieldName]!"
-				:autofocus="index === firstEditableFieldIndex && autofocus"
-				:model-value="(values || {})[fieldName]"
-				:initial-value="(initialValues || {})[fieldName]"
-				:disabled="isDisabled(fieldsMap[fieldName]!)"
-				:batch-mode="batchMode"
-				:batch-active="batchActiveFields.includes(fieldName)"
-				:primary-key="primaryKey"
-				:loading="loading"
-				:validation-error="
-					validationErrors.find(
-						(err) =>
-							err.collection === fieldsMap[fieldName]?.collection &&
-							(err.field === fieldName || err.field.endsWith(`(${fieldName})`))
-					)
-				"
-				:badge="badge"
-				:raw-editor-enabled="rawEditorEnabled"
-				:raw-editor-active="rawActiveFields.has(fieldName)"
-				:direction="direction"
-				@update:model-value="setValue(fieldName, $event)"
-				@set-field-value="setValue($event.field, $event.value, { force: true })"
-				@unset="unsetValue(fieldsMap[fieldName]!)"
-				@toggle-batch="toggleBatchField(fieldsMap[fieldName]!)"
-				@toggle-raw="toggleRawField(fieldsMap[fieldName]!)"
-			/>
+				<form-field
+					v-else-if="!fieldsMap[fieldName]!.meta?.hidden"
+					:ref="
+						(el) => {
+							formFieldEls[fieldName] = el;
+						}
+					"
+					:class="index === firstVisibleFieldIndex ? 'first-visible-field' : ''"
+					:field="fieldsMap[fieldName]!"
+					:autofocus="index === firstEditableFieldIndex && autofocus"
+					:model-value="(values || {})[fieldName]"
+					:initial-value="(initialValues || {})[fieldName]"
+					:disabled="isDisabled(fieldsMap[fieldName]!)"
+					:batch-mode="batchMode"
+					:batch-active="batchActiveFields.includes(fieldName)"
+					:primary-key="primaryKey"
+					:loading="loading"
+					:validation-error="
+						validationErrors.find(
+							(err) =>
+								err.collection === fieldsMap[fieldName]!.collection &&
+								(err.field === fieldName || err.field.endsWith(`(${fieldName})`))
+						)
+					"
+					:badge="badge"
+					:raw-editor-enabled="rawEditorEnabled"
+					:raw-editor-active="rawActiveFields.has(fieldName)"
+					:direction="direction"
+					@update:model-value="setValue(fieldName, $event)"
+					@set-field-value="setValue($event.field, $event.value, { force: true })"
+					@unset="unsetValue(fieldsMap[fieldName]!)"
+					@toggle-batch="toggleBatchField(fieldsMap[fieldName]!)"
+					@toggle-raw="toggleRawField(fieldsMap[fieldName]!)"
+				/>
+			</template>
 		</template>
 		<v-divider v-if="showDivider && !noVisibleFields" />
 	</div>