Merge pull request #10435 from Budibase/more-grid-tweaks

Fix number cell issue with grids and external SQL tables

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>

packages/frontend-core/src/components/grid/cells/NumberCell.svelte

@@ -2,6 +2,13 @@
   import TextCell from "./TextCell.svelte"
 
   export let api
+  export let onChange
+
+  const numberOnChange = value => {
+    const float = parseFloat(value)
+    const newValue = isNaN(float) ? null : float
+    onChange(newValue)
+  }
 </script>
 
-<TextCell {...$$props} bind:api type="number" />
+<TextCell {...$$props} onChange={numberOnChange} bind:api type="number" />

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)}

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