From bd996c0b6178f1bd239c0ae594c9c192fb5f8ea3 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Sun, 4 Feb 2024 12:43:22 +0900
Subject: [PATCH] fix: Enable drafting prop on empty object

---
 .../src/components/inspector/InspectorStateField.vue  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/inspector/InspectorStateField.vue b/packages/client/src/components/inspector/InspectorStateField.vue
index ea19776e..dd405149 100644
--- a/packages/client/src/components/inspector/InspectorStateField.vue
+++ b/packages/client/src/components/inspector/InspectorStateField.vue
@@ -103,10 +103,6 @@ const normalizedDisplayedKey = computed(() => {
   return key.slice(lastDotIndex + 1)
 })
 
-const hasChildren = computed(() => {
-  return Object.keys(normalizedChildField.value).length > 0
-})
-
 // ---------------------------- edit ----------------------------
 const { editingType, editing, editingText, toggleEditing, nodeId } = useStateEditor()
 
@@ -163,6 +159,12 @@ function submitDrafting() {
   resetDrafting()
 }
 
+const hasChildren = computed(() => {
+  return Object.keys(normalizedChildField.value).length > 0
+  // Regard empty object has children When drafting a new property.
+    || draftingNewProp.value.enable
+})
+
 const containerRef = ref<HTMLDivElement>()
 const { isHovering } = useHover(() => containerRef.value)
 </script>
@@ -181,6 +183,7 @@ const { isHovering } = useHover(() => containerRef.value)
           <Actions
             :hovering="isHovering" :disable-edit="state.disableEdit"
             :data="data" :depth="depth" @enable-edit-input="toggleEditing"
+            @add-new-prop="addNewProp"
           />
         </template>
       </div>