From 950e056e1c235c75d322c797ecdabbad5c052de4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 19 Oct 2021 15:11:14 +0100
Subject: [PATCH] Give flatpickr its own root component in client apps to avoid
 it hijacking key events on the whole page

---
 packages/client/src/components/ClientApp.svelte            | 7 +++++++
 .../client/src/components/app/forms/DateTimeField.svelte   | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 462daf7021..cc16570992 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -113,6 +113,13 @@
                     />
                   {/key}
 
+                  <!--
+                    Flatpickr needs to be inside the theme wrapper.
+                    It also needs its own container because otherwise it hijacks
+                    key events on the whole page. It is painful to work with.
+                  -->
+                  <div id="flatpickr-root" />
+
                   <!-- Layers on top of app -->
                   <NotificationDisplay />
                   <ConfirmationDisplay />
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 298fff5a1c..466f7eafd5 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -56,7 +56,7 @@
       disabled={fieldState.disabled}
       error={fieldState.error}
       id={fieldState.fieldId}
-      appendTo={document.getElementById("theme-root")}
+      appendTo={document.getElementById("flatpickr-root")}
       {enableTime}
       {placeholder}
     />