Fixed #2160 - New Calendar focus and blur events

api-generator/components/calendar.js

@@ -332,7 +332,29 @@ const CalendarEvents = [
                 description: "New year"
             }
         ]
-    }
+    },
+    {
+        name: "focus",
+        description: "Callback to invoke on focus of input field.",
+        arguments: [
+            {
+                name: "event",
+                type: "object",
+                description: "Focus event"
+            }
+        ]
+    },
+    {
+        name: "blur",
+        description: "Callback to invoke on blur of input field.",
+        arguments: [
+            {
+                name: "event",
+                type: "object",
+                description: "Blur event"
+            }
+        ]
+    },
 ];
 
 const CalendarSlots = [

src/components/calendar/Calendar.d.ts

@@ -314,6 +314,16 @@ export declare type CalendarEmits = {
      * @param {CalendarYearChangeEvent} event - Custom year change event.
      */
     'year-change': (event: CalendarYearChangeEvent) => void;
+    /**
+     * Callback to invoke on focus of input field.
+     * @param {Event} event - Focus event
+     */
+    'focus': (event: Event) => void;
+    /**
+     * Callback to invoke on blur of input field.
+     * @param {Event} event - Blur event
+     */
+    'blur': (event: Event) => void;
 }
 
 declare class Calendar extends ClassComponent<CalendarProps, CalendarSlots, CalendarEmits> { }

src/components/calendar/Calendar.vue

@@ -150,7 +150,7 @@ import Ripple from 'primevue/ripple';
 export default {
     name: 'Calendar',
     inheritAttrs: false,
-    emits: ['show', 'hide', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click'],
+    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur'],
     props: {
         modelValue: null,
         selectionMode: {
@@ -355,7 +355,7 @@ export default {
         }
 
         if (this.mask) {
-           this.destroyMask();
+            this.destroyMask();
         }
         this.destroyResponsiveStyleElement();
 
@@ -1237,9 +1237,9 @@ export default {
                         return false;
                     }
                     if (this.maxDate.getMinutes() === minute) {
-                      if (this.maxDate.getSeconds() < second) {
-                          return false;
-                      }
+                        if (this.maxDate.getSeconds() < second) {
+                            return false;
+                        }
                     }
                 }
             }
@@ -2140,7 +2140,7 @@ export default {
             }
         },
         onContainerButtonKeydown(event) {
-             switch (event.which) {
+            switch (event.which) {
                 //tab
                 case 9:
                     this.trapFocus(event);
@@ -2155,7 +2155,7 @@ export default {
                 default:
                     //Noop
                 break;
-             }
+            }
         },
         onInput(event) {
             try {
@@ -2174,15 +2174,18 @@ export default {
 
             this.$emit('input', event);
         },
-        onFocus() {
+        onFocus(event) {
             if (this.showOnFocus && this.isEnabled()) {
                 this.overlayVisible = true;
             }
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
             this.input.value = this.formatValue(this.modelValue);
+
+            this.$emit('blur', event);
         },
         onKeyDown() {
             if (event.keyCode === 40 && this.overlay) {

src/views/calendar/CalendarDoc.vue

@@ -459,7 +459,7 @@ export default {
                 <tbody>
                     <tr>
                         <td>input</td>
-                        <td>event</td>
+                        <td>event: Input Event</td>
                         <td>Callback to invoke when input field is being typed.</td>
                     </tr>
                     <tr>
@@ -501,6 +501,16 @@ export default {
                         </td>
                         <td>Callback to invoke when a year is changed using the navigators.</td>
                     </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event: Focus event</td>
+                        <td>Callback to invoke on focus of input field.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event: Blur event</td>
+                        <td>Callback to invoke on blur of input field.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>