SkyGridComponent causes change detection with every mouse movement

[Blackbaud-AnandBhat]

Expected behavior

Adding a SkyGridComponent to SKY UX 2 SPA should not trigger change detection with every mouse movement.

Actual behavior

Adding a SkyGridComponent to SKY UX 2 SPA causes change detection to be triggered with every mouse movement unnecessarily. This is due to a HostListener on the document:mousemove event. I believe that instead of using a HostListener, a listener for the mousemove event should only be added when the mousedown event is fired and removed when the mouseup event is fired.

Steps to reproduce

• Add a SkyGridComponent to a SKY UX 2 SPA component.

• Handle the AfterViewChecked hook in the component where the SkyGridComponent was added in the SPA and log the call to the console.

• Serve a page containing the component.

• Open the browser's development tools and view the console as you move the mouse on the page. There will be logs of the call to ngAfterViewChecked with every mouse movement.

Plunker

Plunker created from the Grid demo and adding a log of every time ngAfterViewChecked is called: https://plnkr.co/edit/kbwHhgB9EsKM0ZgfhaYu?p=preview

Severity

Medium

Impact

Could potentially cause performance issues.

[Blackbaud-AlexKingman]

We might look at using Renderer2 to dynamically turn on/off listeners.