Web components and Blazor grids with moving and pinning throws error when unpinning a column

[mddragnev]

Description

Having web components or blazor grid with moving and pinning throws error when unpinning a column.
Open that sample https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/column-moving

Note the header template:

public webGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {

        const column = (ctx as any).column;
        return html`<div>
                     <span style="float:left">${column.field}</span>
                     <span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
                   </div>`;
        };

See that the span has pointerdown event that pins/unpins a column. There is something with that pointerdown event and with drag-drop directive pointerdown.

NOTE: Note that if you change the event to click - the button stops working

• igniteui-angular version:
• browser:

Steps to reproduce

1. Open this sample https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/column-moving
2. Unpin a column

Result

There is an error in the console

Expected result

There should be no error in the console.
If the event handler is set on click it should work like in Angular

[damyanpetev]

Btw, just for prosperity the click not working part is properly documented (both Angular and WC topics) as something that requires draggable="false". That works fine and also doesn't cause the error:

<span draggable="false" @click=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>

https://codesandbox.io/s/beautiful-flower-x31cni?file=/src/index.ts

Regardless, I agree the attr is a bit of a workaround on our part and would be nice if we can go without.

As for the error:
Here's the Angular repro https://stackblitz.com/edit/angular-9obu1d?file=src%2Fapp%2Fgrid%2Fgrid-moving-sample%2Fgrid-moving-sample.component.html
Which in all likelihood is caused be the pin interaction being done on pointerdown (bit early) that moves the column, essentially overriding the headers virtualized list and discarding the old DOM element, but the drag directive still acts on the event because it doesn't unsubscribe properly. That should actually be resolved by another PR that's already active #12856 (comment)