diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index d3c69b602..4dbeccbfc 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -5,7 +5,7 @@
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
-                <div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" @click="onOverlayClick" @mouseup="onOverlayMouseUp">
+                <div :ref="overlayRef" :class="panelStyleClass" v-if="inline || overlayVisible" :role="inline ? null : 'dialog'" @click="onOverlayClick" @mouseup="onOverlayMouseUp">
                     <template v-if="!timeOnly">
                         <div class="p-datepicker-group-container">
                             <div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
@@ -2190,10 +2190,10 @@ export default {
             this.$emit('focus', event);
         },
         onBlur(event) {
-            this.$emit('blur', {originalEvent: event, value: this.input.value});
+            this.$emit('blur', {originalEvent: event, value: event.target.value});
 
             this.focused = false;
-            this.input.value = this.formatValue(this.modelValue);
+            event.target.value = this.formatValue(this.modelValue);
         },
         onKeyDown(event) {
             if (event.keyCode === 40 && this.overlay) {
diff --git a/src/components/portal/Portal.vue b/src/components/portal/Portal.vue
index 395bbd571..519f1cf50 100644
--- a/src/components/portal/Portal.vue
+++ b/src/components/portal/Portal.vue
@@ -2,11 +2,9 @@
     <template v-if="inline">
         <slot></slot>
     </template>
-    <template v-else-if="mounted">
-        <Teleport :to="appendTo">
-            <slot></slot>
-        </Teleport>
-    </template>
+    <Teleport v-else-if="isClient" :to="appendTo">
+        <slot></slot>
+    </Teleport>
 </template>
 
 <script>
@@ -24,17 +22,12 @@ export default {
             default: false
         }
     },
-    data() {
-        return {
-            mounted: false
-        }
-    },
-    mounted() {
-        this.mounted = DomHandler.isClient();
-    },
     computed: {
         inline() {
             return this.disabled || this.appendTo === 'self';
+        },
+        isClient () {
+            return DomHandler.isClient()
         }
     }
 }