From 4eda1c2a7781da69e7d11953da500510f617b246 Mon Sep 17 00:00:00 2001
From: Brian <5578150+bmanth60@users.noreply.github.com>
Date: Wed, 30 Oct 2024 00:37:49 -0700
Subject: [PATCH] fix: Fixes clickoutside handler function for issue #1475
 (#1476)

* fix: Fixes clickoutside handler function for issue #1475

* Update src/lib/datepicker/Datepicker.svelte

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/lib/datepicker/Datepicker.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/datepicker/Datepicker.svelte b/src/lib/datepicker/Datepicker.svelte
index 8e4aa5e6d..1d83c756c 100644
--- a/src/lib/datepicker/Datepicker.svelte
+++ b/src/lib/datepicker/Datepicker.svelte
@@ -25,6 +25,7 @@
   const dispatch = createEventDispatcher();
   let isOpen: boolean = inline;
   let inputElement: HTMLInputElement;
+  let datepickerContainerElement: HTMLDivElement;
   let currentMonth: Date = value || defaultDate || new Date();
   let focusedDate: Date | null = null;
   let calendarRef: HTMLDivElement;
@@ -150,7 +151,7 @@
   }
 
   function handleClickOutside(event: MouseEvent) {
-    if (isOpen && !inputElement.contains(event.target as Node)) {
+    if (isOpen && datepickerContainerElement && !datepickerContainerElement.contains(event.target as Node)) {
       isOpen = false;
     }
   }
@@ -249,7 +250,7 @@
   }
 </script>
 
-<div class="relative {inline ? 'inline-block' : ''}">
+<div bind:this={datepickerContainerElement} class="relative {inline ? 'inline-block' : ''}">
   {#if !inline}
     <div class="relative">
       <input bind:this={inputElement} type="text" class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(color)} {inputClass}" {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} on:focus={() => (isOpen = true)} on:input={handleInputChange} on:keydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />