From ea2f5ebbf96beae64d1ae6dda70b6bbea8eac58b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Feb 2021 11:10:47 +0000
Subject: [PATCH] Add listener to clear date pickers on certain keystrokes

---
 .../standard-components/src/forms/DateTimeField.svelte   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 7bf6bf7ac1..4924e5e383 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -26,12 +26,21 @@
     fieldApi.setValue(dates[0])
   }
 
+  const clearDateOnBackspace = event => {
+    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
+      fieldApi.setValue(null)
+      flatpickr.close()
+    }
+  }
+
   const onOpen = () => {
     open = true
+    document.addEventListener("keyup", clearDateOnBackspace)
   }
 
   const onClose = () => {
     open = false
+    document.removeEventListener("keyup", clearDateOnBackspace)
 
     // Manually blur all input fields since flatpickr creates a second
     // duplicate input field.