diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 2eae91874..3cbabb07a 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -2,7 +2,7 @@
     <span :class="containerClass">
         <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" />
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" @click="onButtonClick" />
-        <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
+        <transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="bindOutsideClickListener" @leave="onOverlayLeave">
             <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible">
                 <template v-if="!timeOnly">
                     <div class="p-datepicker-group" v-for="(month,i) of months" :key="month.month + month.year">
@@ -502,7 +502,6 @@ export default {
                 this.$refs.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
             this.alignOverlay();
-            this.bindOutsideClickListener();
             this.$emit('show');
         },
         onOverlayLeave() {
@@ -1469,9 +1468,7 @@ export default {
                 focus: event => {
                     $vm.focus = true;
                     if ($vm.showOnFocus && $vm.isEnabled()) {
-                        setTimeout(() => {
-                            $vm.overlayVisible = true;
-                        }, 150);
+                        $vm.overlayVisible = true;
                     }
                     $vm.focused = true;
                     $vm.$emit('focus', event)