Fixed #2235 - Added InputNumber focus and blur events

api-generator/components/inputnumber.js

@@ -173,6 +173,33 @@ const InputNumberEvents = [
                 description: "New value"
             }
         ]
+    },
+    {
+        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.originalEvent",
+                type: "object",
+                description: "Browser event"
+            },
+            {
+                name: "event.value",
+                type: "string",
+                description: "Input value"
+            }
+        ]
     }
 ];
 

src/components/inputnumber/InputNumber.d.ts

@@ -17,6 +17,17 @@ export interface InputNumberInputEvent {
     value: string | number | undefined;
 }
 
+export interface InputNumberBlurEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Input value
+     */
+    value: string;
+}
+
 export interface InputNumberProps {
     /**
      * Value of the component.
@@ -149,11 +160,25 @@ export declare type InputNumberEmits = {
      * @param {number} value - New value.
      */
     'update:modelValue': (value: number) => void;
-     /**
+    /**
       * Callback to invoke when the value is entered.
       * @param {InputNumberInputEvent} event - Custom input event.
       */
     'input': (event: InputNumberInputEvent) => 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 {InputNumberBlurEvent} event - Blur event
+       */
+    'blur': (event: InputNumberBlurEvent) => void;
+    /**
+       * Callback to invoke when a key is pressed.
+       */
+    'keydown': (event: Event) => void;
 }
 
 declare class InputNumber extends ClassComponent<InputNumberProps, InputNumberSlots, InputNumberEmits> {

src/components/inputnumber/InputNumber.vue

@@ -1,7 +1,7 @@
 <template>
     <span :class="containerClass" :style="style">
         <INInputText ref="input" :class="['p-inputnumber-input', inputClass]" :style="inputStyle" :value="formattedValue" v-bind="$attrs" :aria-valumin="min" :aria-valuemax="max"
-           @input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur"/>
+            @input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur"/>
         <span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
             <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="$attrs.disabled" />
             <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="$attrs.disabled" />
@@ -18,7 +18,7 @@ import Button from 'primevue/button';
 export default {
     name: 'InputNumber',
     inheritAttrs: false,
-    emits: ['update:modelValue', 'input'],
+    emits: ['update:modelValue', 'input', 'focus', 'blur'],
     props: {
         modelValue: {
             type: Number,
@@ -898,14 +898,18 @@ export default {
             this.d_modelValue = value;
             this.$emit('update:modelValue', value);
         },
-        onInputFocus() {
+        onInputFocus(event) {
             this.focused = true;
+            this.$emit('focus', event);
         },
         onInputBlur(event) {
             this.focused = false;
 
             let input = event.target;
             let newValue = this.validateValue(this.parseValue(input.value));
+
+            this.$emit('blur', { originalEvent: event, value: input.value});
+            
             input.value = this.formatValue(newValue);
             input.setAttribute('aria-valuenow', newValue);
             this.updateModel(event, newValue);

src/views/inputnumber/InputNumberDoc.vue

@@ -338,6 +338,18 @@ Vertical
                             event.value: New value</td>
                         <td>Callback to invoke when the value is entered.</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.originalEvent: Blur event <br />
+                            event.value: Input value
+                        </td>
+                        <td>Callback to invoke on blur of input field.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>