From 11801fa1fc9dcf740c9e8c0891121be767a1c661 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Mon, 8 Mar 2021 17:05:42 +0100
Subject: [PATCH] fixes colorpicker bugs

---
 packages/builder/package.json                 |  2 +-
 .../PropertyControls/ColorPicker.svelte       | 33 ++++++++++++++++++-
 packages/builder/yarn.lock                    |  8 ++---
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 6d0bb15083..6a4f6eea4b 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -65,7 +65,7 @@
   "dependencies": {
     "@budibase/bbui": "^1.58.13",
     "@budibase/client": "^0.8.3",
-    "@budibase/colorpicker": "1.0.1",
+    "@budibase/colorpicker": "1.1.2",
     "@budibase/string-templates": "^0.8.3",
     "@budibase/svelte-ag-grid": "^1.0.4",
     "@sentry/browser": "5.19.1",
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
index 63ce8da6c4..3c4c7f22d7 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
@@ -1,7 +1,38 @@
 <script>
+  import { createEventDispatcher } from 'svelte'
   import Colorpicker from "@budibase/colorpicker"
+  
+  const dispatch = createEventDispatcher();
 
   export let value
+  
+  const WAIT = 150;
+  
+  function throttle(callback, wait, immediate = false) {
+    let timeout = null 
+    let initialCall = true
+    
+    return function() {
+      const callNow = immediate && initialCall
+      const next = () => {
+        callback.apply(this, arguments)
+        timeout = null
+      }
+      
+      if (callNow) { 
+        initialCall = false
+        next()
+      }
+  
+      if (!timeout) {
+        timeout = setTimeout(next, wait)
+      }
+    }
+  }
+  
+  const onChange = throttle(e => {
+    dispatch('change', e.detail)
+  }, WAIT, true)
 </script>
 
-<Colorpicker value={value || '#000'} on:change />
+<Colorpicker value={value || '#000'} on:change={onChange} />
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 593a2ed815..e5ded575b2 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -833,10 +833,10 @@
     svelte-portal "^1.0.0"
     turndown "^7.0.0"
 
-"@budibase/colorpicker@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
-  integrity sha512-+DTHYhU0sTi5RfCyd7AAvMsLFwyF/wgs0owf7KyQU+ZILRW+YsWa7OQMz+hKQfgVAmvzwrNz8ATiBlG3Ac6Asg==
+"@budibase/colorpicker@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.1.2.tgz#f7436924ee746d7be9b2009c2fa193e710c30f89"
+  integrity sha512-2PlZBVkATDqDC4b4Ri8Xi8X3OxhuHOGfmZwtXbZL38lNIeofaQT3Qyc1ECzEY5N+HrdGrWhY9EnliF6QM+LIuA==
 
 "@budibase/svelte-ag-grid@^1.0.4":
   version "1.0.4"