fix(devtools): unhighlight node after a short timer

formwerkjs · Feb 23, 2025 · c6e1853 · c6e1853
1 parent 66d4b78
commit c6e1853
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/.changeset/beige-eels-know.md b/.changeset/beige-eels-know.md
@@ -0,0 +1,5 @@
+---
+'@formwerk/devtools': patch
+---
+
+fix(devtools): Unhighlight node after a short timer
diff --git a/packages/devtools/src/init.ts b/packages/devtools/src/init.ts
@@ -1,4 +1,4 @@
-import { App, getCurrentInstance, nextTick, onMounted, onUnmounted, watch } from 'vue';
+import { App, type ComponentInternalInstance, 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';
@@ -53,6 +53,17 @@ async function installDevtoolsPlugin(app: App) {
         api => {
           API = api;
 
+          async function highlight(vm: ComponentInternalInstance | null | undefined) {
+            if (!vm) {
+              return;
+            }
+
+            await api.highlightElement(vm);
+            setTimeout(() => {
+              api.unhighlightElement();
+            }, 1250);
+          }
+
           api.addInspector({
             id: INSPECTOR_ID,
             icon: 'https://formwerk.dev/logo-w.svg',
@@ -138,7 +149,7 @@ async function installDevtoolsPlugin(app: App) {
 
               if (form && '_vm' in form) {
                 SELECTED_NODE = { type: 'form', form };
-                api.highlightElement(form._vm);
+                highlight(form._vm);
               }
 
               return;
@@ -150,7 +161,7 @@ async function installDevtoolsPlugin(app: App) {
 
               if (field) {
                 SELECTED_NODE = { type: 'field', field };
-                api.highlightElement(field._vm);
+                highlight(field._vm);
               }
 
               return;