Prevent sort trigger on a table column when resizing it

Question

How can I prevent the sort being triggered on a table column when resizing the column with the resizable component? When the mouseup event occurs over the th that's being resized it triggers the sort. I tried to prevent it in the nzResizeEnd event but I guess thats's too late. Can some one help me please? Example https://stackblitz.com/edit/angular-jqs53u?embed=1&file=src/app/app.component.ts

Went to file the issue in the library repo and someone already has 11 days ago. Let's hope for a quick fix. https://github.com/NG-ZORRO/ng-zorro-antd/issues/5199

Answer 1

Solved the issue by disabling pointer events while resizing.

Component.ts: resizing: boolean = false;

Template:

<th 
  [class.pointer-events-none]="resizing"
  (nzResizeStart)="resizing = true"
  (nzResizeEnd)="resizing = false"
>

Style:

.pointer-events-none {
  pointer-events: none;
}

The stackblitz shows the working state. Now resizing doesn't cause a change in sort direction.

Found out about css pointer-events in another StackOverflow answer.

Also want to thank you Poul Kruijt for your help.