fix: handle click event using event.currentTarget in DataTable

[KumJungMin]

Defect Fixes

Fixes: #6323

How to reproduce Issue

• First, paste code to <template> of CellEditDoc.vue
• and you click cell, you can see the issue

<div class="card">
    <DataTable
        :value="products"
        editMode="cell"
        selectionMode="single"
        @cell-edit-complete="onCellEditComplete"
        :pt="{
            table: { style: 'min-width: 50rem' },
            column: {
                bodycell: ({ state }) => ({
                    class: [{ 'pt-0 pb-0': state['d_editing'] }]
                })
            }
        }"
    >
        <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
            <template #body="{ data, field }">
                <div>
                    {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
                </div>
            </template>
            <template #editor="{ data, field }">
                <div>{{ data[field] }} 1</div>
            </template>
        </Column>
    </DataTable>
</div>

• If you look at the video at the bottom, you can see that focusElement is null when the slot element is clicked.
  For normal behavior, focusElement should exist.

issue.mov

How To Resolve

I change event handling target event.target to event.currentTarget

• event.target references the clicked slot's internal element, which prevents finding the parent <tr> element.
• event.currentTarget accurately points to the parent element that has the event handler attached.

issue resolved video

resolved.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview		Sep 4, 2024 9:15am
primevue-v3	⬜️ Ignored (Inspect)	Visit Preview		Sep 4, 2024 9:15am