fix: autoscroll only when selected changes, closes #1429

Author: Akryum

packages/app-frontend/src/features/components/ComponentTreeNode.vue

@@ -1,5 +1,5 @@
 <script>
-import { computed, toRefs, onMounted, ref, watchEffect, inject } from '@vue/composition-api'
+import { computed, toRefs, onMounted, ref, watchEffect, watch } from '@vue/composition-api'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import { getComponentDisplayName, UNDEFINED } from '@utils/util'
 import SharedData from '@utils/shared-data'
@@ -61,7 +61,7 @@ export default {
 
     // Auto scroll
 
-    watchEffect(() => {
+    function autoScroll () {
       if (selected.value && toggleEl.value) {
         /** @type {HTMLElement} */
         const el = toggleEl.value
@@ -72,7 +72,10 @@ export default {
           behavior: 'smooth'
         })
       }
-    })
+    }
+
+    watch(selected, () => autoScroll())
+    watch(toggleEl, () => autoScroll())
 
     return {
       toggleEl,

packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue

@@ -1,5 +1,5 @@
 <script>
-import { ref, computed, watch, inject, watchEffect } from '@vue/composition-api'
+import { ref, computed, watch, watchEffect } from '@vue/composition-api'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import { useCurrentInspector } from '.'
 
@@ -51,7 +51,7 @@ export default {
 
     const toggleEl = ref()
 
-    watchEffect(() => {
+    function autoScroll () {
       if (selected.value && toggleEl.value) {
         /** @type {HTMLElement} */
         const el = toggleEl.value
@@ -62,7 +62,10 @@ export default {
           behavior: 'smooth'
         })
       }
-    })
+    }
+
+    watch(selected, () => autoScroll())
+    watch(toggleEl, () => autoScroll())
 
     return {
       expanded,