diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 52bcc7bce2..b3eca2485a 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/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)
- }
- })
- 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)
+ component.settings.forEach(setting => {
+ builderStore.highlightSetting(setting)
+ })
}
-
- onDestroy(() => {
- builderStore.highlightSetting(undefined)
- })
State
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 9ad9a75f84..450487a52f 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/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
{
* @param {string} componentId
*/
select(componentId: string) {
+ builderStore.update(state => {
+ state.highlightedSettings = null
+ return state
+ })
+
this.update(state => {
state.selectedComponentId = componentId
return state