Fixed #2186 - Calendar input value added blur event

api-generator/components/calendar.js

@@ -349,9 +349,14 @@ const CalendarEvents = [
         description: "Callback to invoke on blur of input field.",
         arguments: [
             {
-                name: "event",
+                name: "event.originalEvent",
                 type: "object",
-                description: "Blur event"
+                description: "Browser event"
+            },
+            {
+                name: "event.value",
+                type: "string",
+                description: "Input value"
             }
         ]
     },

src/components/calendar/Calendar.d.ts

@@ -44,6 +44,17 @@ export interface CalendarYearChangeEvent {
     year: number;
 }
 
+export interface CalendarBlurEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Input value
+     */
+    value: string;
+}
+
 export interface CalendarProps {
     /**
      * Value of the component.
@@ -321,9 +332,9 @@ export declare type CalendarEmits = {
     'focus': (event: Event) => void;
     /**
      * Callback to invoke on blur of input field.
-     * @param {Event} event - Blur event
+     * @param {CalendarBlurEvent} event - Blur event
      */
-    'blur': (event: Event) => void;
+    'blur': (event: CalendarBlurEvent) => void;
 }
 
 declare class Calendar extends ClassComponent<CalendarProps, CalendarSlots, CalendarEmits> { }

src/components/calendar/Calendar.vue

@@ -2182,10 +2182,10 @@ export default {
             this.$emit('focus', event);
         },
         onBlur(event) {
+            this.$emit('blur', {originalEvent: event, value: this.input.value});
+
             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

@@ -508,7 +508,9 @@ export default {
                     </tr>
                     <tr>
                         <td>blur</td>
-                        <td>event: Blur event</td>
+                        <td>event.originalEvent: Blur event <br />
+                            event.value: Input value
+                        </td>
                         <td>Callback to invoke on blur of input field.</td>
                     </tr>
                 </tbody>