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

Vuepic · Dec 28, 2024 · 265b487 · 265b487
1 parent 9635454
commit 265b487
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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();

diff --git 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
@@ -123,6 +123,7 @@ export const getDefaultTextInputOptions = (textInput: TextInputProp): TextInputO
         openMenu: 'open',
         selectOnFocus: false,
         rangeSeparator: ' - ',
+        escClose: true,
     };
 
     if (typeof textInput === 'object') {