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