Fix #6998: add closest check condition to detect handle icon drag.

[KumJungMin]

Defect Fixes

• fix DataTable: Sometimes row reordering just doesn't work. #6998

Cause

• In the dataTable, handle drag sometimes does not trigger.
• This issue occurs when the mousedown event is fired on the handle, and the event.target is a child element (e.g., <path>) of the icon.

In the video, you can see in the console that sorting fails to work when event.target is a <path> element.

2024-08-15.1.52.29.mp4

Solution

• To determine if the handle is being used, the closest(mdn docs) function is employed to check if the parent element of event.target is the handle element.
• This allows sorting to occur even if a child element (e.g., <path>) within the icon is selected, as long as the parent element is the handle.

fixed example

222.mp4

[vercel]

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

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview		Aug 15, 2024 3:09pm
primereact-v9	⬜️ Ignored (Inspect)	Visit Preview		Aug 15, 2024 3:09pm

[github-actions]

Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>.

[melloware]

Fantastic debugging! Can you try this one to see if it can be simplified logic...

const isDragHandle = isUnstyled()
    ? DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]')
    : DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle');

event.currentTarget.draggable = isDragHandle;
event.target.draggable = !isDragHandle;

[KumJungMin]

Fantastic debugging! Can you try this one to see if it can be simplified logic...

const isDragHandle = isUnstyled()
    ? DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]')
    : DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle');

event.currentTarget.draggable = isDragHandle;
event.target.draggable = !isDragHandle;

---

thank you for suggestion :) i modified it
(4cc6866)