From fbe574812e90491556183c157a254ecbf0953b01 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Tue, 5 Mar 2024 13:44:18 +0000
Subject: [PATCH] Use clickoutside library to stop mouseup closing side panel

---
 packages/client/package.json                     | 1 +
 packages/client/src/components/app/Layout.svelte | 6 ++++--
 yarn.lock                                        | 5 +++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index 00f89a6445..2394afe28d 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -32,6 +32,7 @@
     "@spectrum-css/tag": "^3.1.4",
     "@spectrum-css/typography": "^3.0.2",
     "@spectrum-css/vars": "^3.0.1",
+    "@svelte-put/clickoutside": "^3.0.1",
     "apexcharts": "^3.22.1",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index f1dcdf6b37..573bb194c7 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -1,10 +1,11 @@
 <script>
   import { getContext, setContext } from "svelte"
   import { writable } from "svelte/store"
-  import { Heading, Icon, clickOutside } from "@budibase/bbui"
+  import { Heading, Icon } from "@budibase/bbui"
   import { FieldTypes } from "constants"
   import { Constants } from "@budibase/frontend-core"
   import active from "svelte-spa-router/active"
+  import { clickoutside } from "@svelte-put/clickoutside"
 
   const sdk = getContext("sdk")
   const {
@@ -290,7 +291,8 @@
   <div
     id="side-panel-container"
     class:open={$sidePanelStore.open}
-    use:clickOutside={autoCloseSidePanel ? sidePanelStore.actions.close : null}
+    use:clickoutside={{ event: "mousedown" }}
+    on:clickoutside={autoCloseSidePanel ? sidePanelStore.actions.close : null}
     class:builder={$builderStore.inBuilder}
   >
     <div class="side-panel-header">
diff --git a/yarn.lock b/yarn.lock
index 260ae3870a..85f427ded4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4910,6 +4910,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-8.0.4.tgz#dcf115551f240b25ba629a3b6c4d3eb1429bee15"
   integrity sha512-3jYj5HYxbVfkR4jLV9l+L3g6jS4R09m0lV+gupqnXWpwcThlP0EOjkCkevu195imoS4pZ/i2iLpd98l4qcTc2Q==
 
+"@svelte-put/clickoutside@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@svelte-put/clickoutside/-/clickoutside-3.0.1.tgz#d40b565515d05328cfbb0b076009b32c11b5685e"
+  integrity sha512-RhuRmD2RpXF63Mb48DxKkgqIPQ458TnL8M1m6HqtnPh5/g5p+PKIn/L2SPs1s9us2Kn02Y1/txHhOSYbVi6Z2Q==
+
 "@sveltejs/vite-plugin-svelte@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.4.0.tgz#412a735de489ca731d0c780c2b410f45dd95b392"