From 3d343c9cdd5ff66c9b705c94eb7acd208870c116 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 12 Nov 2021 16:10:50 +0300
Subject: [PATCH] Fixed #1748 - New change event for SelectButton

---
 api-generator/components/selectbutton.js      | 16 ++++++++++++++++
 src/components/selectbutton/SelectButton.d.ts |  1 +
 src/components/selectbutton/SelectButton.vue  |  3 ++-
 src/views/selectbutton/SelectButtonDoc.vue    |  6 ++++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/api-generator/components/selectbutton.js b/api-generator/components/selectbutton.js
index 4cf18d16c..9ce34fdf0 100644
--- a/api-generator/components/selectbutton.js
+++ b/api-generator/components/selectbutton.js
@@ -56,6 +56,22 @@ const SelectButtonProps = [
 ];
 
 const SelectButtonEvents = [
+    {
+        name: "change",
+        description: "Callback to invoke on value change.",
+        arguments: [
+            {
+                name: "event.originalEvent",
+                type: "object",
+                description: "Browser event"
+            },
+            {
+                name: "event.value",
+                type: "any",
+                description: "Single value or an array of values that are selected."
+            }
+        ]
+    },
     {
         name: "focus",
         description: "Callback to invoke on focus.",
diff --git a/src/components/selectbutton/SelectButton.d.ts b/src/components/selectbutton/SelectButton.d.ts
index 06a9c9c90..b5fa64f26 100755
--- a/src/components/selectbutton/SelectButton.d.ts
+++ b/src/components/selectbutton/SelectButton.d.ts
@@ -18,6 +18,7 @@ interface SelectButtonOptionSlotInterface {
 declare class SelectButton {
     $props: SelectButtonProps;
     $emit(eventName: 'update:modelValue', value: any): this;
+    $emit(eventName: 'change', event: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'focus', event: Event): this;
     $emit(eventName: 'blur', event: Event): this;
     $slots: {
diff --git a/src/components/selectbutton/SelectButton.vue b/src/components/selectbutton/SelectButton.vue
index 22cc0cb88..61dd4c195 100755
--- a/src/components/selectbutton/SelectButton.vue
+++ b/src/components/selectbutton/SelectButton.vue
@@ -17,7 +17,7 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'SelectButton',
-    emits: ['update:modelValue', 'focus', 'blur'],
+    emits: ['update:modelValue', 'focus', 'blur', 'change'],
     props: {
         modelValue: null,
         options: Array,
@@ -62,6 +62,7 @@ export default {
             }
 
             this.$emit('update:modelValue', newValue);
+            this.$emit('change', {event: event, value: newValue});
         },
         isSelected(option) {
             let selected = false;
diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue
index 55ff7db9c..8eab68eae 100755
--- a/src/views/selectbutton/SelectButtonDoc.vue
+++ b/src/views/selectbutton/SelectButtonDoc.vue
@@ -139,6 +139,12 @@ export default {
                     </tr>
 				</thead>
 				<tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>event.originalEvent: browser event <br>
+                            event.value: Single value or an array of values that are selected.</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
                     <tr>
                         <td>focus</td>
                         <td>event: Browser event</td>