clear highlight state as part of component select

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -5,7 +5,6 @@
     runtimeToReadableBinding,
   } from "@/dataBinding"
   import { builderStore } from "@/stores/builder"
-  import { onDestroy } from "svelte"
 
   export let label = ""
   export let labelHidden = false
@@ -79,12 +78,6 @@
       ? defaultValue
       : enriched
   }
-
-  onDestroy(() => {
-    if (highlightedSettings) {
-      builderStore.highlightSetting(null)
-    }
-  })
 </script>
 
 <div

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onDestroy } from "svelte"
   import { ActionButton, Modal, ModalContent, Combobox } from "@budibase/bbui"
   import { getAllStateVariables } from "@/dataBinding"
   import {
@@ -94,17 +93,10 @@
   }) {
     componentStore.select(component.id)
 
-    // Delay highlighting until after component selection and re-render (i know this is disgusting)
-    setTimeout(() => {
     component.settings.forEach(setting => {
       builderStore.highlightSetting(setting)
     })
-    }, 100)
   }
-
-  onDestroy(() => {
-    builderStore.highlightSetting(undefined)
-  })
 </script>
 
 <ActionButton on:click={modal.show}>State</ActionButton>

packages/builder/src/stores/builder/components.ts

@@ -20,6 +20,7 @@ import {
   previewStore,
   tables,
   componentTreeNodesStore,
+  builderStore,
 } from "@/stores/builder"
 import { buildFormSchema, getSchemaForDatasource } from "@/dataBinding"
 import {
@@ -716,6 +717,11 @@ export class ComponentStore extends BudiStore<ComponentState> {
    * @param {string} componentId
    */
   select(componentId: string) {
+    builderStore.update(state => {
+      state.highlightedSettings = null
+      return state
+    })
+
     this.update(state => {
       state.selectedComponentId = componentId
       return state