Table sorting changes when using nz-resizable to resize a column

tegola commented 2 years ago

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-bjgjxj

Steps to reproduce

Open the reproduction link
Hover any table head cell separator to reveal the resize handle
Drag the handle to resize the column
Notice that that column's sorting changes too

What is expected?

The column should resize and the column sorting should stay the same.

What is actually happening?

The column sorting is changing due to the mouse click on the resize handle, which cannot be prevented/stopped.

Environment	Info
ng-zorro-antd	13.3.2
Browser	Chrome 103 Mac

superjulius commented 8 months ago

This was also reported couple of years ago #5199 A solution/workaround was given on SO

Solved the issue by disabling pointer events while resizing using a CSS class or style

<th 
  [ngStyle]="{'pointer-events': resizing ? 'none' : 'inherit'}"
  (nzResizeStart)="resizing = true"
  (nzResizeEnd)="resizing = false"
>

mostermsater commented 2 months ago

` @Directive({ selector: 'nz-resize-handle', }) export class ElementDefaultDirective { @HostListener('click', ['$event']) onmousedown(event: { stopPropagation: () => void; preventDefault: () => void }) { event.stopPropagation(); event.preventDefault(); } }

`

NG-ZORRO / ng-zorro-antd