From 2fb44329a8e1ba9ca12e3d58938f59d3019c6535 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: Thu, 24 Feb 2022 15:39:09 +0300
Subject: [PATCH] Fixed #2068 - DataTable row-select index is always undefined

---
 src/components/datatable/BodyCell.vue  | 12 ++++++------
 src/components/datatable/DataTable.vue | 20 ++++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index b0e5b0788..66cbedf19 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -8,8 +8,8 @@
         <component :is="column.children.editor" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" />
         <component :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.body && !column.children.editor && d_editing" />
         <template v-else-if="columnProp('selectionMode')">
-            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="columnProp('selectionMode') === 'single'" />
-            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="columnProp('selectionMode') ==='multiple'" />
+            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" v-if="columnProp('selectionMode') === 'single'" />
+            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox($event, rowIndex)" v-else-if="columnProp('selectionMode') ==='multiple'" />
         </template>
         <template v-else-if="columnProp('rowReorder')">
             <i :class="['p-datatable-reorderablerow-handle', (columnProp('rowReorderIcon') || 'pi pi-bars')]"></i>
@@ -146,11 +146,11 @@ export default {
                 data: this.rowData
             });
         },
-        toggleRowWithRadio(event) {
-            this.$emit('radio-change', event);
+        toggleRowWithRadio(event, index) {
+            this.$emit('radio-change', { originalEvent: event.originalEvent, index: index, data: event.data});
         },
-        toggleRowWithCheckbox(event) {
-            this.$emit('checkbox-change', event);
+        toggleRowWithCheckbox(event, index) {
+            this.$emit('checkbox-change', { originalEvent: event.originalEvent, index: index, data: event.data });
         },
         isEditable() {
             return this.column.children && this.column.children.editor != null;
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 262eff038..3ed083ac2 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -731,7 +731,7 @@ export default {
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                            this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                         }
                         else {
                             if(this.isSingleSelectionMode()) {
@@ -743,18 +743,18 @@ export default {
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                            this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                         }
                     }
                     else {
                         if (this.selectionMode === 'single') {
                             if (selected) {
                                 this.$emit('update:selection', null);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                             else {
                                 this.$emit('update:selection', rowData);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                         }
                         else if (this.selectionMode === 'multiple') {
@@ -762,12 +762,12 @@ export default {
                                 const selectionIndex = this.findIndexInSelection(rowData);
                                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                             else {
                                 const _selection = this.selection ? [...this.selection, rowData] : [rowData];
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                         }
                     }
@@ -863,11 +863,11 @@ export default {
 
             if (this.isSelected(rowData)) {
                 this.$emit('update:selection', null);
-                this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'radiobutton'});
+                this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
             }
             else {
                 this.$emit('update:selection', rowData);
-                this.$emit('row-select', {originalEvent: event, data: rowData, type: 'radiobutton'});
+                this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
             }
         },
         toggleRowWithCheckbox(event) {
@@ -877,13 +877,13 @@ export default {
                 const selectionIndex = this.findIndexInSelection(rowData);
                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
                 this.$emit('update:selection', _selection);
-                this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'checkbox'});
+                this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
             }
             else {
                 let _selection = this.selection ? [...this.selection] : [];
                 _selection = [..._selection, rowData];
                 this.$emit('update:selection', _selection);
-                this.$emit('row-select', {originalEvent: event, data: rowData, type: 'checkbox'});
+                this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
             }
         },
         toggleRowsWithCheckbox(event) {