refactor: inline rendering

src/components/TwoColumnForm.vue

@@ -12,8 +12,7 @@
         @change="(value) => onChange(df, value)"
       />
       <template v-else>
-        <template v-if="inlineEditField === df && inlineEditDoc">
-          <div class="border-b" :key="df.fieldname">
+        <div class="border-b" :key="df.fieldname" v-if="renderInline(df)">
           <TwoColumnForm
             ref="inlineEditForm"
             :doc="inlineEditDoc"
@@ -25,10 +24,7 @@
             @error="(msg) => $emit('error', msg)"
           />
           <div class="flex px-4 pb-2">
-              <Button
-                class="w-1/2 text-gray-900"
-                @click="inlineEditField = null"
-              >
+            <Button class="w-1/2 text-gray-900" @click="inlineEditField = null">
               {{ t('Cancel') }}
             </Button>
             <Button
@@ -40,9 +36,8 @@
             </Button>
           </div>
         </div>
-        </template>
         <div
-          :key="df.fieldname"
+          :key="df.fieldname + '-else'"
           v-else
           class="grid"
           :class="{ 'border-b': !noBorder }"
@@ -141,6 +136,11 @@ let TwoColumnForm = {
     }
   },
   methods: {
+    renderInline(df) {
+      return (
+        this.inlineEditField?.fieldname === df?.fieldname && this.inlineEditDoc
+      );
+    },
     evaluateBoolean(fieldProp, defaultValue) {
       const type = typeof fieldProp;
       switch (type) {