feat: Add escClose to text-input options (resolves #1038)

Author: Jasenkoo

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;

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,13 +292,20 @@
         emit('clear');
     };
 
+    const handleEsc = () => {
+        emit('close');
+    };
+
     const handleKeyPress = (ev: KeyboardEvent): void => {
         if (ev.key === 'Tab') {
             handleTab(ev);
         }
         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();

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);
 }
 

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') {