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: {
@@ -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>