fix: only register fields on mounted

formwerkjs · Feb 22, 2025 · c3a8842 · c3a8842
1 parent a6153e9
commit c3a8842
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/packages/devtools/src/init.ts b/packages/devtools/src/init.ts
@@ -159,27 +159,31 @@ export function initDevTools() {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function registerField(field: FormField<any>, type: string) {
-  const vm = initDevTools();
-  const watchable = _registerField(field, type, vm);
+  onMounted(() => {
+    const vm = initDevTools();
+    const watchable = _registerField(field, type, vm);
 
-  watch(watchable, refreshInspector, {
-    deep: true,
+    watch(watchable, refreshInspector, {
+      deep: true,
+    });
+
+    setTimeout(refreshInspector, 500);
   });
 
-  // TODO: Figure out why this is needed
-  onMounted(() => setTimeout(refreshInspector, 500));
   onUnmounted(refreshInspector);
 }
 
 export function registerForm(form: FormReturns) {
-  const vm = initDevTools();
-  const watchable = _registerForm(form, vm);
+  onMounted(() => {
+    const vm = initDevTools();
+    const watchable = _registerForm(form, vm);
+
+    watch(watchable, refreshInspector, {
+      deep: true,
+    });
 
-  watch(watchable, refreshInspector, {
-    deep: true,
+    setTimeout(refreshInspector, 500);
   });
 
-  // TODO: Figure out why this is needed
-  onMounted(() => setTimeout(refreshInspector, 500));
   onUnmounted(refreshInspector);
 }
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -10,6 +10,7 @@ import RadioItem from '@/components/RadioItem.vue';
 import Switch from '@/components/Switch.vue';
 import InputTextArea from '@/components/InputTextArea.vue';
 import { ref } from 'vue';
+import AllForm from './components/AllForm.vue';
 
 const min = new Date(2025, 0, 4, 0, 0, 0, 0);
 const value = new Date('2025-01-15');