fix(client): hide state field display on edit (#507)

Co-authored-by: Loot Nurakhmetov <[email protected]>
vuejs · Jul 9, 2024 · 81719c5 · 81719c5
1 parent 0e780f7
commit 81719c5
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue
@@ -204,14 +204,16 @@ async function submitDrafting() {
       </span>
       <span mx1>:</span>
       <StateFieldInputEditor v-if="editing" v-model="editingText" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
-      <span :class="stateFormatClass" class="flex whitespace-nowrap">
-        <span class="flex" v-html="normalizedDisplayedValue" />
-      </span>
-      <StateFieldEditor
-        :hovering="isHovering" :disable-edit="state.disableEdit"
-        :data="data" :depth="depth" @enable-edit-input="toggleEditing"
-        @add-new-prop="addNewProp"
-      />
+      <template v-if="!editing">
+        <span :class="stateFormatClass" class="flex whitespace-nowrap">
+          <span class="flex" v-html="normalizedDisplayedValue" />
+        </span>
+        <StateFieldEditor
+          :hovering="isHovering" :disable-edit="state.disableEdit"
+          :data="data" :depth="depth" @enable-edit-input="toggleEditing"
+          @add-new-prop="addNewProp"
+        />
+      </template>
     </div>
     <div v-if="hasChildren && expanded.includes(`${depth}-${index}`)">
       <ChildStateViewer :data="normalizedDisplayedChildren" :depth="depth" :index="index" />