From f3e617635ef88f1dcd29ebc1b1e1929f9cb5843f Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 17:59:09 +0100
Subject: [PATCH] Highlight setting on click

---
 .../_components/ScreenErrorsButton.svelte           | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 5d7e2fb667..82258c5586 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { UIComponentError } from "@budibase/types"
   import {
+    builderStore,
     componentStore,
     screenComponentErrorList,
     screenComponents,
@@ -17,6 +18,13 @@
     }
     return titleParts.join(" - ")
   }
+
+  function onErrorClick(error: UIComponentError) {
+    componentStore.select(error.componentId)
+    if (error.errorType === "setting") {
+      builderStore.highlightSetting(error.key, "error")
+    }
+  }
 </script>
 
 <div bind:this={button} class="error-button">
@@ -40,10 +48,7 @@
           color="var(--spectrum-global-color-static-red-600)"
         />
         <div>
-          <Link
-            overBackground
-            on:click={() => componentStore.select(error.componentId)}
-          >
+          <Link overBackground on:click={() => onErrorClick(error)}>
             {getErrorTitle(error)}:</Link
           >
           <!-- eslint-disable-next-line svelte/no-at-html-tags-->