From feb3187d68c6df2712ff38cb5847568be5ee7493 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 14 May 2021 13:36:59 +0300
Subject: [PATCH] Fixed #944 - Dropdown component does not fire focus or blur
 events

---
 api-generator/components/dropdown.js  | 22 ++++++++++++++++++++++
 src/components/dropdown/Dropdown.d.ts |  2 ++
 src/components/dropdown/Dropdown.vue  |  8 +++++---
 src/views/dropdown/DropdownDoc.vue    | 10 ++++++++++
 4 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/api-generator/components/dropdown.js b/api-generator/components/dropdown.js
index 0e96a6e11..8bce7b77d 100644
--- a/api-generator/components/dropdown.js
+++ b/api-generator/components/dropdown.js
@@ -201,6 +201,28 @@ const DividerEvents = [
         name: "hide",
         description: "Callback to invoke when the overlay is hidden."
     },
+    {
+        name: "focus",
+        description: "Callback to invoke when component receives focus.",
+        arguments: [
+            {
+                name: "event",
+                type: "object",
+                description: "Browser event"
+            }
+        ]
+    },
+    {
+        name: "blur",
+        description: "Callback to invoke when component loses focus.",
+        arguments: [
+            {
+                name: "event",
+                type: "object",
+                description: "Browser event"
+            }
+        ]
+    },
     {
         name: "filter",
         description: "Callback to invoke when the overlay is shown.",
diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index 4d3bb4be0..3299ba971 100755
--- a/src/components/dropdown/Dropdown.d.ts
+++ b/src/components/dropdown/Dropdown.d.ts
@@ -38,6 +38,8 @@ declare class Dropdown {
     $emit(eventName: 'before-leave'): this;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
+    $emit(eventName: 'focus', e: Event): this;
+    $emit(eventName: 'blur', e: Event): this;
     $emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
     $slot: {
         option: VNode[];
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 1f8ccf04c..29796f8dd 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -65,7 +65,7 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'Dropdown',
-    emits: ['update:modelValue', 'before-show', 'before-hide', 'show', 'hide', 'change', 'filter'],
+    emits: ['update:modelValue', 'before-show', 'before-hide', 'show', 'hide', 'change', 'filter', 'focus', 'blur'],
     props: {
         modelValue: null,
         options: Array,
@@ -214,11 +214,13 @@ export default {
             this.$emit('before-hide');
             this.overlayVisible = false;
         },
-        onFocus() {
+        onFocus(event) {
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
+            this.$emit('blur', event);
         },
         onKeyDown(event) {
             switch(event.which) {
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index c4b15cbce..3ad245036 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -334,6 +334,16 @@ export default {
                         <td>-</td>
                         <td>Callback to invoke when the overlay is hidden.</td>
                     </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
                     <tr>
                         <td>filter</td>
                         <td>event.originalEvent: Original event <br />