fix: ensure fields appear on mount

formwerkjs · Feb 22, 2025 · d0e108d · d0e108d
1 parent 2065079
commit d0e108d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/devtools/src/init.ts b/packages/devtools/src/init.ts
@@ -1,4 +1,4 @@
-import { App, getCurrentInstance, nextTick, onUnmounted, watch } from 'vue';
+import { App, getCurrentInstance, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import { throttle } from 'packages/shared/src';
 import { FormField, FormReturns } from '@core/index';
 import { isSSR } from '@core/utils/common';
@@ -166,9 +166,9 @@ export function registerField(field: FormField<any>, type: string) {
     deep: true,
   });
 
+  // TODO: Figure out why this is needed
+  onMounted(() => setTimeout(refreshInspector, 500));
   onUnmounted(refreshInspector);
-
-  refreshInspector();
 }
 
 export function registerForm(form: FormReturns) {
@@ -179,7 +179,7 @@ export function registerForm(form: FormReturns) {
     deep: true,
   });
 
+  // TODO: Figure out why this is needed
+  onMounted(() => setTimeout(refreshInspector, 500));
   onUnmounted(refreshInspector);
-
-  refreshInspector();
 }
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -11,6 +11,7 @@ import RadioItem from '@/components/RadioItem.vue';
 import Switch from '@/components/Switch.vue';
 import InputTextArea from '@/components/InputTextArea.vue';
 import AllForm from './components/AllForm.vue';
+import { ref } from 'vue';
 
 const min = new Date(2025, 0, 4, 0, 0, 0, 0);
 const value = new Date('2025-01-15');
@@ -21,6 +22,8 @@ const options = [
   { label: 'Option 2', value: '2' },
   { label: 'Option 3', value: '3' },
 ];
+
+const isNotificationsEnabled = ref(false);
 </script>
 
 <template>
@@ -44,10 +47,15 @@ const options = [
       <RadioItem name="gender" value="other" label="Other" />
     </RadioGroup>
 
-    <Switch name="notifications" label="Enable notifications" />
+    <Switch name="notifications" label="Enable notifications" v-model="isNotificationsEnabled" />
 
-    <Calendar name="calendar" label="Calendar" />
+    <InputText
+      v-if="isNotificationsEnabled"
+      name="notificationName"
+      label="Notification name"
+      placeholder="Enter notification name"
+    />
 
-    <AllForm />
+    <!-- <AllForm /> -->
   </div>
 </template>