fix: Use allowPreventDefault and allowStopPropagation config options for esc key (fixes #1079)

Author: Jasenkoo

src/VueDatePicker/components/Common/SelectionOverlay.vue

@@ -108,7 +108,7 @@
 
     const props = defineProps<Props>();
 
-    const { defaultedAriaLabels, defaultedTextInput, defaultedConfig } = useDefaults(
+    const { defaultedAriaLabels, defaultedTextInput, defaultedConfig, handleEventPropagation } = useDefaults(
         props as unknown as PickerBasePropsType,
     );
     const { hideNavigationButtons } = useCommon();
@@ -244,9 +244,10 @@
         emit('reset-flow');
     };
 
-    const handleEsc = () => {
+    const handleEsc = (ev: KeyboardEvent) => {
         if (props.escClose) {
             toggle();
+            handleEventPropagation(ev);
         }
     };
 
@@ -298,7 +299,7 @@
     const onKeyDown = (ev: KeyboardEvent) => {
         switch (ev.key) {
             case EventKey.esc:
-                return handleEsc();
+                return handleEsc(ev);
             case EventKey.arrowLeft:
                 return handleArrowKey(ev);
             case EventKey.arrowRight:

src/VueDatePicker/components/DatepickerMenu.vue

@@ -195,7 +195,8 @@
 
     const { setMenuFocused, setShiftKey, control } = useState();
     const slots = useSlots();
-    const { defaultedTextInput, defaultedInline, defaultedConfig, defaultedUI } = useDefaults(props);
+    const { defaultedTextInput, defaultedInline, defaultedConfig, defaultedUI, handleEventPropagation } =
+        useDefaults(props);
     const { isMobile } = useResponsive(defaultedConfig, props.shadow);
 
     const calendarWrapperRef = ref(null);
@@ -318,9 +319,10 @@
         checkStopPropagation(ev, defaultedConfig.value, true);
     };
 
-    const handleEsc = (): void => {
+    const handleEsc = (ev: KeyboardEvent): void => {
         if (props.escClose) {
             emit('close-picker');
+            handleEventPropagation(ev);
         }
     };
 
@@ -418,7 +420,7 @@
 
         switch (ev.key) {
             case EventKey.esc:
-                return handleEsc();
+                return handleEsc(ev);
             case EventKey.arrowLeft:
                 return onArrowKey(ev, ArrowDirection.left);
             case EventKey.arrowRight:

src/VueDatePicker/composables/defaults.ts

@@ -101,6 +101,15 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
 
     const defaultedUI = computed(() => getDefaultUI(props.ui));
 
+    const handleEventPropagation = (ev: KeyboardEvent) => {
+        if (defaultedConfig.value.allowStopPropagation) {
+            ev.stopPropagation();
+        }
+        if (defaultedConfig.value.allowPreventDefault) {
+            ev.preventDefault();
+        }
+    };
+
     return {
         defaultedTransitions,
         defaultedMultiCalendars,
@@ -121,5 +130,6 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
         defaultedUI,
         getDefaultPattern,
         getDefaultStartTime,
+        handleEventPropagation,
     };
 };