From 5728cf9b2a66e42b7a886c3d6915d7c527069478 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Apr 2023 11:55:03 +0100
Subject: [PATCH] Add clickoutside handlers to options, long form and
 relationship cells

---
 .../src/components/grid/cells/LongFormCell.svelte      |  2 ++
 .../src/components/grid/cells/OptionsCell.svelte       |  3 ++-
 .../src/components/grid/cells/RelationshipCell.svelte  | 10 ++++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
index 00e12dc6a3..886d4ef8b0 100644
--- a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount, tick } from "svelte"
+  import { clickOutside } from "@budibase/bbui"
 
   export let value
   export let focused = false
@@ -60,6 +61,7 @@
     on:change={handleChange}
     on:wheel|stopPropagation
     spellcheck="false"
+    use:clickOutside={close}
   />
 {:else}
   <div class="long-form-cell" on:click={editable ? open : null} class:editable>
diff --git a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
index 993d99fef1..9399617eb7 100644
--- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, clickOutside } from "@budibase/bbui"
   import { getColor } from "../lib/utils"
   import { onMount } from "svelte"
 
@@ -118,6 +118,7 @@
       class:invertX
       class:invertY
       on:wheel={e => e.stopPropagation()}
+      use:clickOutside={close}
     >
       {#each options as option, idx}
         {@const color = getOptionColor(option)}
diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
index 13dc2ae76f..40b6de5eaa 100644
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@@ -18,7 +18,7 @@
 <script>
   import { getColor } from "../lib/utils"
   import { onMount, getContext } from "svelte"
-  import { Icon, Input, ProgressCircle } from "@budibase/bbui"
+  import { Icon, Input, ProgressCircle, clickOutside } from "@budibase/bbui"
   import { debounce } from "../../../utils/utils"
 
   export let value
@@ -284,7 +284,13 @@
   </div>
 
   {#if isOpen}
-    <div class="dropdown" class:invertX class:invertY on:wheel|stopPropagation>
+    <div
+      class="dropdown"
+      class:invertX
+      class:invertY
+      on:wheel|stopPropagation
+      use:clickOutside={close}
+    >
       <div class="search">
         <Input
           autofocus