Fixed #1748 - New change event for SelectButton

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.",

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: {

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;

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>