From c0e14d006ea39965e805adbf9698f5cb95e7c965 Mon Sep 17 00:00:00 2001
From: kyyy <60952577+rdjanuar@users.noreply.github.com>
Date: Tue, 22 Apr 2025 22:01:44 +0700
Subject: [PATCH] fix(Table): checkbox still emit `@select` event (#3269)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 src/runtime/components/data/Table.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 04fe264a..038b5538 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -93,15 +93,17 @@
                 />
               </td>
               <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class, column.key === 'select' && ui.checkbox.padding]">
-                <slot v-if="modelValue && column.key === 'select' " name="select-data" :checked="isSelected(row)" :change="ev => onChangeCheckbox(ev, row)">
-                  <UCheckbox
-                    :model-value="isSelected(row)"
-                    v-bind="ui.default.checkbox"
-                    aria-label="Select row"
-                    @change="onChangeCheckbox($event, row)"
-                  />
-                </slot>
-
+                <!-- This is a workaround: Since the @change event doesn't bubble up naturally, we need to wrap it in another element and use @click.capture.stop to simulate event bubbling behavior -->
+                <span v-if="modelValue && column.key === 'select' " @click.capture.stop="() => {}">
+                  <slot name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
+                    <UCheckbox
+                      :model-value="isSelected(row)"
+                      v-bind="ui.default.checkbox"
+                      aria-label="Select row"
+                      @change="onChangeCheckbox($event, row)"
+                    />
+                  </slot>
+                </span>
                 <slot
                   v-else
                   :name="`${column.key}-data`"