From dd6160ace15fee9461c64df63226ff8a98f9a5b8 Mon Sep 17 00:00:00 2001
From: Jasenko Karovic <karovicm995@gmail.com>
Date: Sat, 28 Dec 2024 15:18:54 +0100
Subject: [PATCH] feat: Add `escClose` to `text-input` options (resolves #1038)

---
 index.d.ts                                       |  1 +
 src/VueDatePicker/components/DatepickerInput.vue | 13 +++++++++++--
 src/VueDatePicker/interfaces.ts                  |  1 +
 src/VueDatePicker/utils/defaults.ts              |  1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 043f60e1..ec2ae89d 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -199,6 +199,7 @@ export interface VueDatePickerProps {
               rangeSeparator?: string;
               selectOnFocus?: boolean;
               format?: string | string[] | ((value: string) => Date | null);
+              escClose?: boolean;
           };
     monthNameFormat?: 'long' | 'short';
     startDate?: string | Date;
diff --git a/src/VueDatePicker/components/DatepickerInput.vue b/src/VueDatePicker/components/DatepickerInput.vue
index 08f9f8d9..c010966b 100644
--- a/src/VueDatePicker/components/DatepickerInput.vue
+++ b/src/VueDatePicker/components/DatepickerInput.vue
@@ -58,11 +58,13 @@
                     @click="emit('toggle')"
                 />
             </div>
-            <span v-if="$slots['clear-icon'] && (alwaysClearable || inputValue && clearable && !disabled && !readonly)" class="dp--clear-btn"
+            <span
+                v-if="$slots['clear-icon'] && (alwaysClearable || (inputValue && clearable && !disabled && !readonly))"
+                class="dp--clear-btn"
                 ><slot name="clear-icon" :clear="onClear"
             /></span>
             <button
-                v-if="!$slots['clear-icon'] && (alwaysClearable || clearable && inputValue && !disabled && !readonly)"
+                v-if="!$slots['clear-icon'] && (alwaysClearable || (clearable && inputValue && !disabled && !readonly))"
                 :aria-label="defaultedAriaLabels?.clearInput"
                 class="dp--clear-btn"
                 type="button"
@@ -290,6 +292,10 @@
         emit('clear');
     };
 
+    const handleEsc = () => {
+        emit('close');
+    };
+
     const handleKeyPress = (ev: KeyboardEvent): void => {
         if (ev.key === 'Tab') {
             handleTab(ev);
@@ -297,6 +303,9 @@
         if (ev.key === 'Enter') {
             handleEnter(ev);
         }
+        if (ev.key === 'Escape' && defaultedTextInput.value.escClose) {
+            handleEsc();
+        }
         if (!defaultedTextInput.value.enabled) {
             if (ev.code === 'Tab') return;
             ev.preventDefault();
diff --git a/src/VueDatePicker/interfaces.ts b/src/VueDatePicker/interfaces.ts
index b8a8bbf6..5f1afec2 100644
--- a/src/VueDatePicker/interfaces.ts
+++ b/src/VueDatePicker/interfaces.ts
@@ -47,6 +47,7 @@ export interface TextInputOptions {
     openMenu: string | boolean;
     rangeSeparator: string;
     selectOnFocus: boolean;
+    escClose: boolean;
     format?: string | string[] | ((value: string) => Date | null);
 }
 
diff --git a/src/VueDatePicker/utils/defaults.ts b/src/VueDatePicker/utils/defaults.ts
index 874e822e..10a5f0e4 100644
--- a/src/VueDatePicker/utils/defaults.ts
+++ b/src/VueDatePicker/utils/defaults.ts
@@ -123,6 +123,7 @@ export const getDefaultTextInputOptions = (textInput: TextInputProp): TextInputO
         openMenu: 'open',
         selectOnFocus: false,
         rangeSeparator: ' - ',
+        escClose: true,
     };
 
     if (typeof textInput === 'object') {