Fix multiple issues with keypresses and date cells due to flatpickr

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -18,10 +18,14 @@
   export let ignoreTimezones = false
   export let time24hr = false
   export let range = false
+  export let flatpickr
+  export let useKeyboardShortcuts = true
+
   const dispatch = createEventDispatcher()
   const flatpickrId = `${uuid()}-wrapper`
+
   let open = false
-  let flatpickr, flatpickrOptions
+  let flatpickrOptions
 
   // Another classic flatpickr issue. Errors were randomly being thrown due to
   // flatpickr internal code. Making sure that "destroy" is a valid function
@@ -59,6 +63,8 @@
         dispatch("change", timestamp.toISOString())
       }
     },
+    onOpen: () => dispatch("open"),
+    onClose: () => dispatch("close"),
   }
 
   $: redrawOptions = {
@@ -113,12 +119,16 @@
 
   const onOpen = () => {
     open = true
-    document.addEventListener("keyup", clearDateOnBackspace)
+    if (useKeyboardShortcuts) {
+      document.addEventListener("keyup", clearDateOnBackspace)
+    }
   }
 
   const onClose = () => {
     open = false
-    document.removeEventListener("keyup", clearDateOnBackspace)
+    if (useKeyboardShortcuts) {
+      document.removeEventListener("keyup", clearDateOnBackspace)
+    }
 
     // Manually blur all input fields since flatpickr creates a second
     // duplicate input field.

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

@@ -1,12 +1,17 @@
 <script>
   import dayjs from "dayjs"
   import { CoreDatePicker, Icon } from "@budibase/bbui"
+  import { onMount } from "svelte"
 
   export let value
   export let schema
   export let onChange
   export let focused = false
   export let readonly = false
+  export let api
+
+  let flatpickr
+  let isOpen
 
   // adding the 0- will turn a string like 00:00:00 into a valid ISO
   // date, but will make actual ISO dates invalid
@@ -19,6 +24,26 @@
     ? "MMM D YYYY"
     : "MMM D YYYY, HH:mm"
   $: editable = focused && !readonly
+
+  // Ensure we close flatpickr when unselected
+  $: {
+    if (!focused) {
+      flatpickr?.close()
+    }
+  }
+
+  const onKeyDown = () => {
+    return isOpen
+  }
+
+  onMount(() => {
+    api = {
+      onKeyDown,
+      focus: () => flatpickr?.open(),
+      blur: () => flatpickr?.close(),
+      isActive: () => isOpen,
+    }
+  })
 </script>
 
 <div class="container">
@@ -42,6 +67,10 @@
       {timeOnly}
       time24hr
       ignoreTimezones={schema.ignoreTimezones}
+      bind:flatpickr
+      on:open={() => (isOpen = true)}
+      on:close={() => (isOpen = false)}
+      useKeyboardShortcuts={false}
     />
   </div>
 {/if}