diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index 0b645636a..a6a90452c 100755
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -6,7 +6,7 @@
                 <div class="p-message-text">
                     <slot></slot>
                 </div>
-                <button class="p-message-close p-link" @click="visible = false" v-if="closable" type="button" v-ripple>
+                <button class="p-message-close p-link" @click="close($event)" v-if="closable" type="button" v-ripple>
                     <i class="p-message-close-icon pi pi-times"></i>
                 </button>
             </div>
@@ -18,6 +18,7 @@
 import Ripple from '../ripple/Ripple';
 
 export default {
+    emits: ['close'],
     props: {
         severity: {
             type: String,
@@ -49,6 +50,12 @@ export default {
             }, this.life);
         }
     },
+    methods: {
+        close(event) {
+            this.visible = false;
+            this.$emit('close', event);
+        }
+    },
     computed: {
         containerClass() {
             return 'p-message p-component p-message-' + this.severity;
diff --git a/src/views/dropdown/DropdownDemo.vue b/src/views/dropdown/DropdownDemo.vue
index 6fb313dbe..778f32c68 100755
--- a/src/views/dropdown/DropdownDemo.vue
+++ b/src/views/dropdown/DropdownDemo.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
+                <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
 
                 <h5>Editable</h5>
                 <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
@@ -47,15 +47,15 @@ import DropdownDoc from './DropdownDoc';
 export default {
     data() {
         return {
-            selectedCity1: null,
+            selectedCity1: 0,
             selectedCity2: null,
             selectedCountry: null,
             cities: [
-                {name: 'New York', code: 'NY'},
-                {name: 'Rome', code: 'RM'},
-                {name: 'London', code: 'LDN'},
-                {name: 'Istanbul', code: 'IST'},
-                {name: 'Paris', code: 'PRS'}
+                {name: 'New York', code: 1},
+                {name: 'Rome', code: 2},
+                {name: 'London', code: 0},
+                {name: 'Istanbul', code: 4},
+                {name: 'Paris', code: 5}
             ],
             countries: [
                 {name: 'Australia', code: 'AU'},
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index ff7e6c2d4..7a06b44e0 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -144,6 +144,26 @@ import InlineMessage from 'primevue/inlinemessage';
 					</table>
 				</div>
 
+                <h5>Events of Message</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>close</td>
+                                <td>event: Browser event</td>
+                                <td>Callback to invoke when a message is closed.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
 				<h5>Styling</h5>
 				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>